有没有办法让DIV无法选择？

Question

这是一个有趣的CSS问题给你!

我有一个透明背景的textarea覆盖了一些TEXT,我想用它作为一种水印.文本很大,占据了textarea的大部分.它看起来不错,问题是当用户点击textarea时,它有时会选择水印文本.我希望水印文本永远不会被选中.我期待如果z-index中的某些内容较低,则无法选择,但浏览器在选择项目时似乎并不关心z-index层.有没有一个技巧或方法来使它这样DIV永远不可选择？

Answer 1

我写了一个简单的jQuery扩展来禁用选择一段时间:在jQuery中禁用选择.你可以调用它$('.button').disableSelection();

或者,使用CSS(跨浏览器):

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

Answer 2

以下CSS代码几乎适用于现代浏览器:

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

对于IE,您必须在html标记中使用JS或insert属性.

<div id="foo" unselectable="on" class="unselectable">...</div>

Answer 3

只需更新一些对CSS的补充,就可以更新aleemb的原始,备受推崇的答案.

我们一直在使用以下组合:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

我们建议添加webkit-touch条目:http:
//phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015年4月:只需使用可能派上用场的变体更新我自己的答案.如果您需要动态地选择/不可选择DIV并且愿意使用Modernizr,以下工作在javascript中整齐地工作:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Answer 4

正如Johannes已经建议的那样,背景图像可能是仅在CSS中实现这一目标的最佳方式.

JavaScript解决方案还必须影响"dragstart"才能在所有流行的浏览器中生效.

JavaScript的:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery的:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

丰富

Answer 5

您可以pointer-events: none;在CSS中使用

div {
  pointer-events: none;
}

Answer 6

你可以试试这个:

<div onselectstart="return false">your text</div>

Answer 7

textarea的简单背景图片不会足够吗？

Answer 8

WebKit浏览器（即Google Chrome和Safari）具有与 Mozilla 类似的 CSS 解决方案-moz-user-select: none：

.no-select{
    -webkit-user-select: none;
    cursor:not-allowed; /* Makes it even more obvious */
}