关于CSS：是否有办法使DIV不可选择？


Is there a way to make a DIV unselectable?

这是一个有趣的CSS问题！

我有一个带有透明背景的文本区域，上面覆盖着一些我想用作水印的文本。 文本很大，并占据了大部分文本区域。 看起来不错，问题在于，当用户在文本区域中单击时，有时会选择水印文本。 我希望水印文本永远不可选择。 我原以为如果z索引中的某个值较低，将是无法选择的，但是浏览器在选择项目时似乎并不关心z索引层。 有没有技巧或方法可以使这个DIV永远不会被选择？

相关讨论

我写了一个简单的jQuery扩展以在一段时间前禁用选择：在jQuery中禁用选择。您可以通过$('.button').disableSelection();调用它

或者，使用CSS(跨浏览器)：

1
2
3
4
5
6
7
.button {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
}
相关讨论

以下CSS代码几乎可以在现代浏览器中运行：

1
2
3
4
5
6
7
.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

对于IE，您必须使用JS或在html标记中插入属性。

1
...
相关讨论

只需在CSS上添加一些内容，即可更新aleemb最初的，广受好评的答案。

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

1
2
3
4
5
6
7
8
9
.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 /取消选择DIV并且愿意使用Modernizr，则可以在javascript中巧妙地完成以下工作：

1
2
3
    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';
相关讨论

正如Johannes已经建议的那样，背景图像可能是仅在CSS中实现此目标的最佳方法。

JavaScript解决方案还必须影响"拖动开始"才能在所有流行的浏览器上均有效。

JavaScript：

1
your text

jQuery的：

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

丰富

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

1
2
3
div {
  pointer-events: none;
}

文本区域的简单背景图像是否足够？

相关讨论

您可以尝试以下方法：

1
your text
相关讨论

WebKit浏览器(即Google Chrome和Safari)具有类似于Mozilla的-moz-user-select：none的CSS解决方案。

1
2
3
4
.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

同样在IOS中，如果您想摆脱触摸时出现的灰色半透明覆盖层，请添加CSS：

1
2
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

确保将位置明确设置为绝对或相对位置，以使z-index可以进行选择。我有一个类似的问题，这为我解决了。

用

onselectstart ="返回假"

它防止复制您的内容。

相关讨论

不确定您的用例，但可以将其拖动。

相关讨论