如何使用 jQuery 禁用文本选择?

IT技术 javascript jquery jquery-ui
2021-01-20 15:52:58

jQuery 或 jQuery-UI 是否具有禁用给定文档元素的文本选择的功能?

6个回答

在 jQuery 1.8 中,这可以按如下方式完成:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);
对于那些说“不要”禁用文本选择(或其他任何关于此问题的内容)的人,请稍稍放开您的思想。很多时候人们出于审美原因禁用它,例如避免在双击带有文本的标签时选择文本等。所以要么回答问题,要么提供一个实际的反点并指定你正在谈论的否定,不要不要只是以一般的方式把这个想法写下来。
2021-03-14 15:52:58
JavaScript 替代方案仅适用于 IE。“onselectstart”不适用于其他浏览器
2021-03-18 15:52:58
@Omar:我很清楚这一点。
2021-03-18 15:52:58
谢谢你。我正在处理一个拖动滑块,需要一种在此过程中不会选择文本的方法。
2021-03-24 15:52:58

如果你使用 jQuery UI,有一个方法,但它只能处理鼠标选择(即CTRL+A仍然有效):

$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9

代码非常简单,如果您不想使用 jQuery UI:

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });
jquery ui 函数会很棒,但它不提供相同级别的保护,它确实阻止直接选择内容,但是如果您从另一个 dom 对象进行选择,则您也需要 css 规则 - 这是函数= function () { return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) + ".ui-disableSelection", function( event ) { event.preventDefault(); }); }
2021-03-20 15:52:58
我正在一些锚文本上创建一个右键单击上下文菜单,我不希望文本在单击时选择。所以是的,@Monk,这将是一个合法的例子。
2021-03-26 15:52:58
请注意,在 jQuery UI 1.9 中不推荐使用 disableSelection()
2021-03-30 15:52:58
它也可能需要 .on('mousedown', false) 工作,具体取决于您的浏览器。然而,默认情况下杀死 mousedown 事件是危险的,因为这可能会破坏现有功能
2021-04-03 15:52:58
Arg。被贬值了,真烦人。当您合法地想要此时,有很多时间。
2021-04-04 15:52:58

我发现这个答案(防止文本表突出显示)最有帮助,也许它可以与提供 IE 兼容性的另一种方式结合使用。

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
Chrome 使用 -webkit-user-select
2021-03-12 15:52:58
始终欣赏 CSS 的做事方式,而不是一般使用 jQuery 或 JS。就像 jQuery 动画与 CSS 转换一样,浏览器内置的方式总是最好和最有效的。
2021-04-10 15:52:58

这里有一个更全面的解决方案断开选择,取消一些热键(如Ctrl+aCtrl+ c测试: Cmd +aCmd+ c

(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();

jsfiddle.net/JBxnQ/

对于旧版本的 FireFox(我不知道是哪个),这也可能不够。如果所有这些都不起作用,请添加以下内容:

.on('mousedown', false)
这对我很有用,但我不得不禁用 ".each(function() { $(this).attr('unselectable','on') .bind('selectstart',function(){ return false; } ); });" 我的特定网络应用程序(JQuery Mobile)的部分,以防万一它对任何人都有帮助。
2021-03-17 15:52:58
为什么要打attr('unselectable', 'on')两次电话这是打字错误还是有用?
2021-04-10 15:52:58

以下将禁用所有常见浏览器(IE、Chrome、Mozilla、Opera 和 Safari)中所有类“item”的选择:

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);
更新:代替 .attr('disabled', 'disabled'),我使用了 .attr('readonly', 'readonly')。禁用阻止在 MVC 中发布我的模型变量(模型变量为空)。Readonly 仍然禁用查找(我使用引导程序)并且它允许发布项目值
2021-03-17 15:52:58
优秀的兄弟,我使用此代码替换“指针事件:无;”,这在 IE 11 中不起作用。
2021-03-17 15:52:58
不复杂 - 很棒!谢谢你。为残疾人寻找; 我添加了 .attr('disabled', 'disabled')
2021-03-24 15:52:58