如何使HTML文本无法选择 [英] How to make HTML Text unselectable
问题描述
我想在我的网页上添加文字作为标签，并使其无法选择。
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,...)
推荐答案
你不能用普通的vanilla HTML来做到这一点，所以JSF不能为你做
You can't do this with plain vanilla HTML, so JSF can't do much for you here as well.
如果您指定体面的浏览器，那么只需使用CSS3：
If you're targeting decent browsers only, then just make use of 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:
<!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>
如果您已经在使用 jQuery ，然后是另一个例子，它添加一个新的函数 disableSelection（）到jQuery，以便你可以在jQuery代码中的任何地方使用它：
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:
<!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>
这篇关于如何使HTML文本无法选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
