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


当前回答

CHROME 1线解决方案:

body.style.webkitUserSelect = "none";

和FF:

body.style.MozUserSelect = "none";

IE需要设置“unselectable”属性(详细信息在底部)。

我在Chrome中测试了这个,它可以工作。此属性是继承的,因此在body元素上设置它将禁用整个文档中的选择。

详情:http://help.dottoro.com/ljrlukea.php

如果你正在使用闭包,只需调用这个函数:

goog.style.setUnselectable(myElement, true);

它透明地处理所有浏览器。

非ie浏览器是这样处理的:

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

定义: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

IE部分是这样处理的:

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

其他回答

这里有一个更全面的解决方案来断开选择,并取消一些热键(如Ctrl+a和Ctrl+c)。测试:Cmd+a和Cmd+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)

在适当的情况下,一种解决方案是对您不想选择的文本使用<按钮>。如果你在某个文本块上绑定到click事件,并且不希望该文本是可选择的,那么将其更改为按钮将改善语义,也会阻止文本被选择。

<button>Text Here</button>

CHROME 1线解决方案:

body.style.webkitUserSelect = "none";

和FF:

body.style.MozUserSelect = "none";

IE需要设置“unselectable”属性(详细信息在底部)。

我在Chrome中测试了这个,它可以工作。此属性是继承的,因此在body元素上设置它将禁用整个文档中的选择。

详情:http://help.dottoro.com/ljrlukea.php

如果你正在使用闭包,只需调用这个函数:

goog.style.setUnselectable(myElement, true);

它透明地处理所有浏览器。

非ie浏览器是这样处理的:

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

定义: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

IE部分是这样处理的:

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兼容性的另一种方式结合起来。

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

这可以很容易地完成使用JavaScript这是适用于所有浏览器

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

调用此函数

<script type="text/javascript">
   disableSelection(document.body)
</script>