JavaScript-Javascript 双击选中单词时获取选中单词的内容

Web程序数据库 Web程序数据库 主题:1214 回复:2505

JavaScript-Javascript 双击选中单词时获取选中单词的内容

甜柠檬 发布于 2016-10-30 字数 110 浏览 1167 回复 1

双击的时候如何获取选中的内容

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

灵芸 2017-10-01 1 楼

做了一个简单的demo,你可以看下效果,应该是你想要的:

http://jsbin.com/afuqur/1/

关键代码:

(function($){
    $.fn.extend({
        "selectText":function(value){
            value=$.extend({
                "delays":300
                },value);
        var $this = $(this);

        //鼠标抬起进,获取选择文字的字数。并根据字数,是否显示弹出层
        $this.mouseup(function(event){

            //IE和火狐兼容性的处理函数。
            function selectText(){
                if(document.selection){
                    return document.selection.createRange().text;// IE
                }else{
                    return  window.getSelection().toString(); //标准
                }
            }

            var str = selectText();

            var l = event.clientX;
            var t = event.clientY;

            if(str.length > 0){
                $this.next("div").html(str).css({"top":t+10,"left":l+10}).delay(value.delays).fadeIn();
            }
        });

        //点击文档任何位置,让显示的层消失
        $(document).click(function(){
            $this.next("div").fadeOut();
        })  

        //阻止冒泡,防止第一次选中文字时,由于冒泡,而触发了$(document).click事件  
        $this.click(function(event){
            event.stopPropagation();
        });

        return $this;
    }   
})  

})(jQuery)<、pre>

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <p class="sel" >这是一段测试文字
..................
 </p>
 <div class="tip"></div>
</body>
</html>

示例代码也 可以在这里查看