jQuery或jQuery- ui是否有任何功能禁用给定文档元素的文本选择?
当前回答
这可以很容易地完成使用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>
其他回答
最好和最简单的方法,我发现它,防止ctrl + c,右键单击。在本例中,我屏蔽了所有内容,因此不需要指定任何内容。
$(document).bind("contextmenu cut copy",function(e){
e.preventDefault();
//alert('Copying is not allowed');
});
$(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");
});
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);
}
}
在适当的情况下,一种解决方案是对您不想选择的文本使用<按钮>。如果你在某个文本块上绑定到click事件,并且不希望该文本是可选择的,那么将其更改为按钮将改善语义,也会阻止文本被选择。
<button>Text Here</button>
如果你使用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; });