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

这里有一个有趣的 CSS 问题给你！

我有一个透明的背景覆盖一些文本的文本区域，我想用作一种水印。文字很大，占据了文字区的大部分。它看起来很漂亮，问题是当用户点击文本区域时，它有时会选择水印文本来代替。我希望水印文本永远不会被选择。我原以为如果 z-index 中的某个元素比较低，那么它就不会被选择，但是浏览器在选择项目时似乎并不关心 z-index 层。是否有一个技巧或方法使这个 DIV 永远不可选？

191860 次浏览
小开

你可以试试这个:

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

一个简单的背景图像对于文本区来说不是足够了吗？

小开

我曾经编写了一个简单的 jQuery 扩展来禁用选择: 禁用 < strong > jQuery 中的选择。您可以通过 $('.button').disableSelection();调用它

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

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

正如 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);

瑞奇

小开

WebKit 浏览器(如 Google Chrome 和 Safari)有一个类似于 Mozilla 的-moz-user-select: none 的 CSS 解决方案

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

下面的 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 或者插入属性。

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

同样在 IOS 中，如果你想去除灰色的半透明覆盖，添加 css:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
小开

只是更新了 Aleemb 的原始答案，在 CSS 中增加了一些内容。

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

.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 可选/不可选，并且愿意使用 现代化，那么下面的代码可以在 javascript 中工作:

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

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

div {
pointer-events: none;
}
小开

使用

Onselectstart = “ return false”

它可以防止复制你的内容。

小开

确保将 z-index 的位置显式设置为绝对或相对，以便进行选择。我也遇到过类似的问题，这个帮我解决了。

小开

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


提交答案