如何使 HTML 文本不可选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2310734/
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 to make HTML Text unselectable
提问by Ben
I would like to add text to my webpage as a label and make it unselectable.
我想将文本作为标签添加到我的网页并使其无法选择。
In other words, When the mouse cursor is over the text I would like it to not turn into a text selecting cursor at all.
换句话说，当鼠标光标在文本上时，我希望它根本不会变成文本选择光标。
A good example of what I'm trying to achieve is the buttons on this website (Questions,Tags,Users,...)
我想要实现的一个很好的例子是这个网站上的按钮（问题、标签、用户……）
回答by BalusC
You can't do this with plain vanilla HTML, so JSF can't do much for you here as well.
你不能用普通的普通 HTML 做到这一点，所以在这里 JSF 也不能为你做太多。
If you're targeting decent browsersonly, then just make use of CSS3:
如果您只针对不错的浏览器，那么只需使用 CSS3：
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<label class="unselectable">Unselectable label</label>
If you'd like to cover older browsers as well, then consider this JavaScript fallback:
如果您还想涵盖较旧的浏览器，请考虑以下 JavaScript 后备：
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734</title>
<script>
window.onload = function() {
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
disableSelection(labels[i]);
}
};
function disableSelection(element) {
if (typeof element.onselectstart != 'undefined') {
element.onselectstart = function() { return false; };
} else if (typeof element.style.MozUserSelect != 'undefined') {
element.style.MozUserSelect = 'none';
} else {
element.onmousedown = function() { return false; };
}
}
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
If you're already using jQuery, then here's another example which adds a new function disableSelection()to jQuery so that you can use it anywhere in your jQuery code:
如果您已经在使用jQuery，那么这里是另一个示例，它disableSelection()向 jQuery添加了一个新函数，以便您可以在 jQuery 代码的任何位置使用它：
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
$('label').disableSelection();
});
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
回答by Blowsie
No one here posted an answer with all of the correct CSS variations, so here it is:
这里没有人发布所有正确的 CSS 变体的答案，所以这里是：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
回答by Vic Goldfeld
The full modern solution to your problem is purely CSS-based, but note that older browsers won't support it, in which cases you'd need to fallback to solutions such as the others have provided.
您的问题的完整现代解决方案完全基于 CSS，但请注意，旧浏览器将不支持它，在这种情况下，您需要回退到其他人提供的解决方案。
So in pure CSS:
所以在纯 CSS 中：
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
However the mouse cursor will still change to a caret when over the element's text, so you add to that:
但是，鼠标光标在元素文本上方时仍会更改为插入符号，因此您可以添加：
cursor: default;
Modern CSS is pretty elegant.
现代 CSS 非常优雅。
回答by Steve
I altered the jQuery plugin posted above so it would work on live elements.
我更改了上面发布的 jQuery 插件，以便它可以在实时元素上工作。
(function ($) {
$.fn.disableSelection = function () {
return this.each(function () {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
};
})(jQuery);
Then you could so something like:
然后你可以这样：
$(document).ready(function() {
$('label').disableSelection();
// Or to make everything unselectable
$('*').disableSelection();
});
