如何禁用文本select使用jQuery?

jQuery或jQuery-UI是否具有禁用给定文档元素的文本select的function?

在jQuery 1.8中,可以这样做:

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

如果你使用jQuery UI,有一个方法,但它只能处理鼠标select(即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; }); 

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

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

这里有一个更全面的解决scheme来select断开连接,并取消一些热键(如Ctrl + aCtrl + c。TestCmd + 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) 

以下将禁用所有常见浏览器(IE,Chrome,Mozilla,Opera和Safari)中所有类的“项目”的select:

 $(".item") .attr('unselectable', 'on') .css({ 'user-select': 'none', 'MozUserSelect': 'none' }) .on('selectstart', false) .on('mousedown', false); 
  $(document).ready(function(){ $("body").css("-webkit-user-select","none"); $("body").css("-moz-user-select","none"); $("body").css("-ms-user-select","none"); $("body").css("-o-user-select","none"); $("body").css("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> 

这其实很简单。 要禁用文本select(也可以单击+拖动文本(例如Chrome中的链接)),只需使用以下jQuery代码:

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

所有这一切都可以防止在您使用鼠标( mousedown() )在bodyhtml标签中单击时发生默认设置。 通过改变两个引号之间的文本(例如,将$('body, html')更改$('#myUnselectableDiv') ,可以非常容易地更改元素,使myUnselectableDiv div可以不可选。

一个快速的片段显示/certificate给你:

 $('#no-select').mousedown(function(event) { event.preventDefault(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span> <br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span> 

CHROME的1线解决scheme:

 body.style.webkitUserSelect = "none"; 

和FF:

 body.style.MozUserSelect = "none"; 

IE需要设置“不可选”属性(详见底部)。

我在Chrome中testing了它,它工作。 这个属性是inheritance的,所以在body元素上设置它会禁用整个文档中的select。

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

如果你使用Closure,只需调用这个函数:

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

我认为这个代码适用于所有的浏览器,并且需要最less的开销。 这真是上述所有答案的混合体。 让我知道如果你发现一个错误!

添加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;} 

添加jQuery:

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

可选:要禁止所有子元素的select,您可以将IE块更改为:

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

用法:

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

对于这种情况的一个解决scheme是,对于不希望被select的文本使用<button> 。 如果您绑定到某个文本块上的click事件,并且不希望该文本是可选的,那么将其更改为button将改善语义并防止文本被选中。

 <button>Text Here</button> 

最好和最简单的方式,我发现它,防止CTRL + C,右键单击。 在这种情况下,我封锁了一切,所以我不必指定任何东西。

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