Javascript 如何使用jQuery禁用文本选择？

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

在jQuery 1.8中，可以按如下方式执行：

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

我发现这个答案（）非常有用，也许它可以与提供IE兼容性的另一种方式结合起来

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

---

如果您使用jQuery UI，则有一种方法可用于此操作，但它只能处理鼠标选择（即CTRL+a仍在工作）：

如果您不想使用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; });

---

这里有一个更全面的解决方案，用于断开连接选择和取消某些热键（如Ctrl+a和Ctrl+c。Cmd+a和Cmd+c）

这对于旧版本的FireFox来说可能还不够（我不知道是哪个）。如果所有这些都不起作用，请添加以下内容：

.on('mousedown', false)

这可以使用JavaScript轻松完成这适用于所有浏览器

/***********************************************
*禁用文本选择脚本-©Dynamic Drive DHTML代码库（www.dynamicdrive.com）
*此通知必须保持完整，以便合法使用
*访问动态驱动http://www.dynamicdrive.com/ 获取完整的源代码
***********************************************/
功能禁用选择（目标）{
if（typeof target.onselectstart！=“undefined”）//用于IE
target.onselectstart=function（）{return false}
else if（typeof target.style.mozzuserselect！=“undefined”）//用于Firefox
target.style.MozUserSelect=“无”
else//所有其他路线（用于歌剧院）
target.onmousedown=function（）{return false}
target.style.cursor=“默认”
}

调用此函数

禁用选择（document.body）

1铬合金生产线解决方案：

body.style.webkitUserSelect = "none";

及FF:

body.style.MozUserSelect = "none";

IE需要设置“不可选择”属性（底部有详细信息）

我在Chrome上测试了这个，效果很好。此属性是继承的，因此在body元素上设置它将禁用整个文档中的选择

详情如下：

如果使用闭包，只需调用以下函数：

goog.style.setUnselectable(myElement, true);

它透明地处理所有浏览器

非IE浏览器的处理方式如下：

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}

定义如下：

IE部分的处理方式如下：

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}

---

我认为此代码适用于所有浏览器，所需开销最小。它实际上是上述所有答案的混合体。如果你发现一只虫子，请告诉我

添加CSS:

.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

$('.someclasshere').disableSelection();

添加jQuery:

.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

$('.someclasshere').disableSelection();

可选：要同时禁用所有子元素的选择，可以将IE块更改为：

$(this).each(function() {
    $(this).attr('unselectable','on')
    .bind('selectstart',function(){ return false; });
});

用法：

.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

$('.someclasshere').disableSelection();

---

以下内容将禁用在所有常用浏览器（即Chrome、Mozilla、Opera和Safari）中选择所有类的“项”：

---

这其实很简单。 要禁用文本选择（同时单击并拖动文本（例如Chrome中的链接）），只需使用以下jQuery代码：

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

所有这一切都是为了防止在使用鼠标（

mousedown（）

）在

body

和

html

标记中单击时发生默认情况。只需将两个引号之间的文本更改（例如将

$（'body，html'）

更改为

$（'#myUnselectableDiv'）

即可轻松更改元素，从而使

myUnselectableDiv

div成为不可选择的

向您展示/证明这一点的快速片段：

$（“#无选择”）.mousedown（函数（事件）{
event.preventDefault（）；
})；

我打赌你不能选择此文本或拖动，

但您可以选择此文本并拖动！

我找到它的最佳和最简单的方法是，阻止ctrl+c，右键单击。在这种情况下，我阻止了所有内容，因此无需指定任何内容

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});

---

在适当的情况下，解决此问题的一个方法是对不希望选择的文本使用

。如果您绑定到某个文本块上的

单击事件，并且不希望该文本可选择，则将其更改为按钮将改善语义并防止选择文本

<button>Text Here</button>

这里的文本
我已经尝试了所有的方法，而这一种对我来说是最简单的，因为我使用的是IWebBrowser2，没有10种浏览器可供使用：

document.onselectstart = new Function('return false;');

非常适合我！
可能重复：@John:上面的链接回答了你的问题吗？如果没有，你可能想详细说明你的情况有什么不同。是的，确实如此。但是，尽管答案是一样的，但这个问题非常具体，所以很多人在考虑更一般的问题时可能会错过这个答案（和我一样）。@Jhon：另一个问题也有jQuery解决方案。JavaScript替代方案仅适用于IE“onselectstart”不适用于其他应用程序browsers@Omar：我很清楚这一点。@布赖斯：不要。谢谢你。我当时正在使用一个拖动滑块，需要一种在这个过程中不会选择文本的方法。对于那些说“不要”的人，请禁用文本选择（或其他类似的东西），敞开你的思想一点。通常人们出于审美的原因禁用它，比如避免在双击标签时选择文本，标签中有文本等等。因此，要么回答问题，要么提供一个实际的计数器点，并指定你所说的否定，而不是以一般的方式将想法划掉。jquery ui函数这会很好，但它不提供相同级别的保护，它确实阻止直接选择对象，但是如果您携带的是来自另一个dom对象的选择，那么您也需要css规则-这里是function=function（）{return this.bind（$.support.selectstart？.selectstart）：“mousedown”）+“.ui disableSelection”，函数（event）{event.preventDefault（）；}）；}注意，在jQuery UI 1.9中不推荐使用disableSelection（），它可能还需要.on（'mousedown'，false）才能工作，具体取决于您的浏览器