【发布时间】：2011-01-19 14:59:11
【问题描述】：
我想将文本作为标签添加到我的网页并使其无法选择。
换句话说，当鼠标光标在文本上时，我希望它根本不变成文本选择光标。
我想要实现的一个很好的例子是这个网站上的按钮（问题、标签、用户......）
【问题讨论】：
标签： html css cross-browser highlighting textselection
【发布时间】：2011-01-19 14:59:11
【问题描述】：
你不能用普通的普通 HTML 做到这一点，所以 JSF 在这里也不能为你做很多事情。
如果您只针对 decent browsers，那么只需使用 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>
如果您还想涵盖旧版浏览器，请考虑使用此 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>
如果您已经在使用jQuery，那么这里是另一个示例，它向 jQuery 添加了一个新函数 disableSelection()，以便您可以在 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>
【讨论】：
-
这个答案有问题，不再适用于所有情况。其他浏览器使用自己的供应商前缀，而您只使用
MozUserSelect。新浏览器将不使用前缀。查看所有可能的 javascript 前缀列表： ['Moz', 'Webkit', 'ms', 'O', 'Khtml', ''] /*空字符串表示无前缀*/。您应该正确处理骆驼情况。这是一个严重的错误，您正在用您的函数覆盖onselectstart和onmousedown事件处理程序，因此以前附加的处理程序不再工作。如果你愿意，我可以更新你的代码 -
@BalusC 就我在这里看到的developer.mozilla.org/en-US/docs/Web/CSS/user-select，你仍然不能只用 CSS 做这个跨浏览器（旧的 IE、Opera 和 Firefox）。所以需要一个好的混合解决方案
-
并且@Blowsie 报告了 cmets 中的问题。
-
如果你最终将 disableSelection 添加到 jQuery - 我做了，而且效果很好，但是给它另一个名字。如果您最终使用 jQuery UI，则在使用可调整大小之类的插件时会出现名称冲突。只是提醒一下。
我更改了上面发布的 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);
那么你可以这样：
$(document).ready(function() {
$('label').disableSelection();
// Or to make everything unselectable
$('*').disableSelection();
});
【讨论】：
-
这是一个很好的答案，但不幸的是它已经过时了。请参阅我对@BalusC 回答的评论
这里没有人发布所有正确 CSS 变体的答案，所以这里是：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
【讨论】：
-
这些在现代浏览器中运行良好，但请注意像 IE7 这样的旧浏览器不支持。
-
在 Chrome 18 中，这只是一种视觉效果，文字仍然是可选择的。
-
仍然可以在 Opera 11 中选择文本
-
仍然可以在 Opera 中选择文本。
-
@RonRoyston 问题是关于选择不复制。但也许你想要this。
您的问题的完整现代解决方案完全基于 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;
但是，鼠标光标在元素文本上时仍会变为插入符号，因此您可以添加：
cursor: default;
现代 CSS 非常优雅。