zoukankan      html  css  js  c++  java
  • jQuery计算选中的文本字数,并弹出一个层(插件四)

    (function($){
        $.fn.extend({
            "selectText":function(value){
                value=$.extend({
                    "delays":800
                    },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 > 10){
                        $this.next("div").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)

    关键:如何获取鼠标选中了多少个文字?

    document.selection.createRange().text; IE使用

    window.getSelection().toString(); 标准浏览器使用


    注意
    1.发生的事件,应该是mouseup,而不是select,这个只能用在输入元素里面例如input textarear;

    2.阻止冒泡,防止第一次选中文字时,由于冒泡,而触发了$(document).click事件

    [下载 DEMO]
  • 相关阅读:
    (x^n-1)在实数域上的标准分解
    子数列收敛定理(任何有界数列必有收敛子数列)
    Islamic empire
    Cauchy收敛准则
    Islamic
    用上下极限判定数列的算数平均值的极限
    妞妞打车之最多的硬币
    信仰1056
    棋盘游戏
    取石子的游戏
  • 原文地址:https://www.cnblogs.com/lufy/p/2494410.html
Copyright © 2011-2022 走看看