精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

JQuery版的选择性屏蔽禁止文本选择实现范例代码，同样的对于其他的操作也可以选择性的屏蔽，下面青岛星网直接跟大家分享实现方法。

JQuery选择性屏蔽禁止文本选择

(function($){
    
  $.fn.ctrlCmd = function(key) {
    
    var allowDefault = true;
    
    if (!$.isArray(key)) {
       key = [key];
    }
    
    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};
    
    
$.fn.disableSelection = function() {
    
    this.ctrlCmd(['a', 'c']);
    
    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};
    
})(jQuery);

在使用上采取下面的代码：

$(':not(input,select,textarea)').disableSelection();

这样就可以除去input、select、textarea外禁止选择了，这段代码的技巧是除了采取selectstart外还给相关元素添加了某些特殊浏览器支持的CSS特性，这样基本可以实现大多数浏览器的兼容，同时这段代码还屏蔽了键盘按键选择Ctrl+A和Ctrl+C，真是非常周到的考虑。

我在测试这段代码时遇到一个问题就是点击除input、select、textarea外的元素时会全部选择页面，原文作者给出一个简单的方法就是在使用代码上附加.on('mousedown', false)，这样就屏蔽了鼠标的单击，使用代码变成如下：$(':not(input,select,textarea)').disableSelection().on('mousedown', false);

问题又来了，采取上述代码后，input,select,textarea也开始变得不正常起来，看样子屏蔽mousedown的特性应用到所有元素上了。现在转换一下思路，结合刚才我提出的方案，判断event对象来实现选择性屏蔽，我将代码修正如下：

$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
    var event = $.event.fix(e);
    var elem = event.target || e.srcElement;
    if (elem.tagName.toUpperCase() != 'TEXTAREA' && elem.tagName.toUpperCase() != 'INPUT') {
        e.preventDefault();
        return false;
    }
    return true;
});

这样textarea和input就不会限制mousedown了，我们将这段代码抽出为函数：

function jQuery_isTagName(e, whitelists) {
      e = $.event.fix(e);
      var target = e.target || e.srcElement;
      if (whitelists && $.inArray(target.tagName.toString().toUpperCase(), whitelists) == -1) {
        return false;
      }
      return true;
}
   
$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
        e.preventDefault();
        return false;
    }
    return true;
});

JQuery版的选择性屏蔽禁止鼠标右键

对于右键菜单，我们可以这样处理：

$(document).bind("contextmenu",function(e){
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
        e.preventDefault();
        return false;
    }
    return true;
});
Tags：JQuery 屏蔽
没有了