CSS 有没有办法使 DIV 无法选择？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/924916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to make a DIV unselectable?
提问by Whozumommy
Here is an interesting CSS questions for you!
这是一个有趣的 CSS 问题！
I have a textarea with a transparent background overlaying some TEXT that I'd like to use as a sort of watermark. The text is large and takes up a majority of the textarea. It looks nice, the problem is when the user clicks in the textarea it sometimes selects the watermark text instead. I want the watermark text to never be selectable. I was expecting if something was lower in the z-index it would not be selectable but browsers don't seem to care about z-index layers when selecting items. Is there a trick or way to make it so this DIV is never selectable?
我有一个带有透明背景的 textarea 覆盖了一些我想用作一种水印的文本。文字很大，占据了大部分的textarea。看起来不错，问题是当用户单击 textarea 时，它有时会选择水印文本。我希望水印文本永远无法选择。我期待如果 z-index 中的某些内容较低，它将无法选择，但浏览器在选择项目时似乎并不关心 z-index 层。有什么技巧或方法可以使这个 DIV 永远无法选择吗？
回答by aleemb
I wrote a simple jQuery extension to disable selection some time back: Disabling Selection in jQuery. You can invoke it through $('.button').disableSelection();
我写了一个简单的 jQuery 扩展来禁用选择一段时间：在jQuery 中禁用选择。你可以通过调用它$('.button').disableSelection();
Alternately, using CSS (cross-browser):
或者，使用 CSS（跨浏览器）：
.button {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
回答by KimKha
The following CSS code works almost modern browser:
以下 CSS 代码几乎适用于现代浏览器：
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
For IE, you must use JS or insert attribute in html tag.
对于 IE，您必须使用 JS 或在 html 标签中插入属性。
<div id="foo" unselectable="on" class="unselectable">...</div>
回答by Anne Gunn
Just updating aleemb's original, much-upvoted answer with a couple of additions to the css.
只是更新了 aleemb 的原始、备受赞誉的答案，并在 css 中添加了一些内容。
We've been using the following combo:
我们一直在使用以下组合：
.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;
}
We got the suggestion for adding the webkit-touch entry from:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html
我们从以下位置获得了添加 webkit-touch 条目的建议：http:
//phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html
2015 Apr: Just updating my own answer with a variation that may come in handy. If you need to make the DIV selectable/unselectable on the fly and are willing to use Modernizr, the following works neatly in javascript:
2015 年 4 月：只是用可能会派上用场的变体来更新我自己的答案。如果您需要动态选择/不选择 DIV 并愿意使用Modernizr，以下内容在 javascript 中可以很好地工作：
var userSelectProp = Modernizr.prefixed('userSelect');
var specialDiv = document.querySelector('#specialDiv');
specialDiv.style[userSelectProp] = 'none';
回答by kim3er
As Johannes has already suggested, a background-image is probally the best way to achieve this in CSS alone.
正如约翰内斯已经建议的那样，背景图像可能是仅在 CSS 中实现这一目标的最佳方式。
A JavaScript solution would also have to affect "dragstart" to be effective across all popular browsers.
JavaScript 解决方案还必须影响“dragstart”才能在所有流行的浏览器中有效。
JavaScript:
JavaScript：
<div onselectstart="return false;" ondragstart="return false;">your text</div>
jQuery:
jQuery：
var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
Rich
富有的
回答by Linh Dam
You can use pointer-events: none;in your CSS
你可以pointer-events: none;在你的 CSS 中使用
div {
pointer-events: none;
}
回答by Fortega
you can try this:
你可以试试这个：
<div onselectstart="return false">your text</div>
回答by Joey
Wouldn't a simple background image for the textarea suffice?
textarea 的简单背景图像还不够吗？
回答by James
WebKit browsers (ie Google Chrome and Safari) have a CSS solution similar to Mozilla's -moz-user-select:none
WebKit 浏览器（即 Google Chrome 和 Safari）具有类似于 Mozilla 的 -moz-user-select:none 的 CSS 解决方案
.no-select{
-webkit-user-select: none;
cursor:not-allowed; /*makes it even more obvious*/
}
回答by Artjom Kurapov
Also in IOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add css:
同样在 IOS 中，如果您想摆脱出现在触摸屏上的灰色半透明覆盖，请添加 css：
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
回答by Anuraj
Use
用
onselectstart="return false"
onselectstart="返回假"
it prevents copying your content.
它可以防止复制您的内容。
