Html 如何使用 CSS 或 JavaScript 禁用文本选择？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3779534/
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
How do I disable text selection with CSS or JavaScript?
提问by daviddarx
I am making a HTML/CSS/jQuery gallery, with several pages.
我正在制作一个 HTML/CSS/jQuery 画廊，有几个页面。
I indeed have a "next" button, which is a simple link with a jQuery click listener.
我确实有一个“下一步”按钮，它是一个带有 jQuery 单击侦听器的简单链接。
The problem is that if the user click the button several times, the text of the button is selected, and then the full line of text. In my really darky design, that is really ugly and nonsensical.
问题在于，如果用户多次单击按钮，则选择按钮的文本，然后选择整行文本。在我非常黑暗的设计中，这真的很丑陋和荒谬。
So here is my question: Can you disable text selection on HTML? If not, I'll terribly miss flash and its high level of configuration on textfields...
所以这是我的问题：您可以禁用 HTML 上的文本选择吗？如果没有，我会非常想念 flash 及其在文本字段上的高级配置...
回答by Jerome
<div
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
unselectable="on"
onselectstart="return false;"
onmousedown="return false;">
Blabla
</div>
回答by Blowsie
UPDATE January, 2017:
2017 年 1 月更新：
According to Can I use, the user-selectis currently supported in all browsers except Internet Explorer 9 and earlier versions (but sadly stillneeds a vendor prefix).
根据Can I use，user-select目前除 Internet Explorer 9 和更早版本外的所有浏览器都支持（但遗憾的是仍然需要供应商前缀）。
All of the correct CSS variations are:
所有正确的 CSS 变体是：
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}<p>
Selectable text.
</p>
<p class="noselect">
Unselectable text.
</p>Note that it's a non-standard feature(i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.
请注意，这是一个非标准功能（即不是任何规范的一部分）。它不能保证在任何地方都有效，并且浏览器之间的实现可能存在差异，未来浏览器可能会放弃对它的支持。
More information can be found in Mozilla Developer Network documentation.
更多信息可以在Mozilla Developer Network 文档中找到。
回答by Nyxynyx
Try this CSS code for cross-browser compatibility.
试试这个 CSS 代码以获得跨浏览器的兼容性。
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
回答by James Sumners
You can use JavaScript to do what you want:
你可以使用 JavaScript 来做你想做的事：
if (document.addEventListener !== undefined) {
// Not IE
document.addEventListener('click', checkSelection, false);
} else {
// IE
document.attachEvent('onclick', checkSelection);
}
function checkSelection() {
var sel = {};
if (window.getSelection) {
// Mozilla
sel = window.getSelection();
} else if (document.selection) {
// IE
sel = document.selection.createRange();
}
// Mozilla
if (sel.rangeCount) {
sel.removeAllRanges();
return;
}
// IE
if (sel.text > '') {
document.selection.empty();
return;
}
}
Soap box:You really shouldn't be screwing with the client's user agent in this manner. If the client wants to select things on the document, then they should be able to select things on the document. It doesn't matter if youdon't like the highlight color, because youaren't the one viewing the document.
肥皂盒：您真的不应该以这种方式与客户的用户代理搞混。如果客户想要选择文档上的内容，那么他们应该能够选择文档上的内容。如果您不喜欢高亮颜色也没关系，因为您不是查看文档的人。
回答by Kyle
I'm not sure if you can turn it off, but you can change the colors of it :)
我不确定你是否可以关闭它，但你可以改变它的颜色:)
myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
background:#000;
color:#fff;
}
Then just match the colors to your "darky" design and see what happens :)
然后将颜色与您的“深色”设计相匹配，看看会发生什么:)
