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

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

203459 次浏览
小开
最佳答案

在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+一个仍然有效):

$('.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; });
小开

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

这可以很容易地完成使用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>
小开

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;
< p >定义: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html < / p >

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);
}
}
小开 
        $(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");
});
小开

我认为这段代码适用于所有浏览器和需要最少的开销。它实际上是上述所有答案的混合体。如果你发现了窃听器，请告诉我!

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

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

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

用法:

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

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

$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
小开
这其实很简单。 要禁用文本选择(也可以点击+拖动文本(例如Chrome中的链接))，只需使用以下jQuery代码 
$('body, html').mousedown(function(event) {
event.preventDefault();
});

所有这一切都是为了防止当你在body和html标记中用鼠标(mousedown())单击时发生默认情况。你可以很容易地通过改变两个引号之间的文本来改变元素(例如将$('body, html')改为$('#myUnselectableDiv')，使myUnselectableDiv div变得不可选。

一个简短的片段向你展示/证明这一点:

$('#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>

请注意，这个效果不是完美的，并且在整个窗口不可选的情况下表现最好。你可能还想补充

取消一些热键(如Ctrl +一个和Ctrl + c。测试: Cmd +一个和Cmd + c)

也可以用上面弗拉基米尔的回答。(找到他的帖子在这里)

小开

最好和最简单的方法，我发现它，防止ctrl + c，右键单击。在本例中，我屏蔽了所有内容，因此不需要指定任何内容。

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

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

<button>Text Here</button>
小开

我已经尝试了所有的方法，这一个对我来说是最简单的，因为我使用IWebBrowser2，没有10个浏览器来竞争:

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

非常适合我!


提交答案