如何使HTML文本不可选择
我想将文本作为标签添加到我的网页，并使其不可选择 换句话说，当鼠标光标在文本上时，我不希望它变成一个文本选择光标如何使HTML文本不可选择,html,css,cross-browser,highlighting,textselection,Html,Css,Cross Browser,Highlighting,Textselection,我想将文本作为标签添加到我的网页，并使其不可选择 换句话说，当鼠标光标在文本上时，我不希望它变成一个文本选择光标 我试图实现的一个很好的例子是这个网站上的按钮（问题、标签、用户等）普通HTML无法实现这一点，因此JSF在这里也不能为您做很多事情 如果您只瞄准目标，那么只需使用CSS3： 。不可选择{ -webkit触摸标注：无； -webkit用户选择：无； -khtml用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； } 不可选择的标签 如果你还想覆盖老浏览器，
我试图实现的一个很好的例子是这个网站上的按钮（问题、标签、用户等）普通HTML无法实现这一点，因此JSF在这里也不能为您做很多事情 如果您只瞄准目标，那么只需使用CSS3：
。不可选择{
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
不可选择的标签
如果你还想覆盖老浏览器，那么考虑一下这个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插件，使其能够在活动元素上工作
(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();
});
没有人在这里发布了包含所有正确CSS变体的答案，因此如下所示：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
解决您的问题的完整现代解决方案完全基于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非常优雅。这些在现代浏览器中工作得很好，但请注意，像IE7这样的旧浏览器不支持这种功能。在Chrome 18中，这只是一种视觉效果，文本仍然可以选择。仍然可以在Opera 11中选择文本仍然可以在Opera中选择文本。@RonRoyston问题是关于选择而不是复制。但也许你想要。你称之为现代？必须指定相同的东西6次？是的，我也讨厌浏览器前缀，但他们有不同意的历史，所以我们习惯了使用它们。@FlavorScape我使用，所以我只需要写一次这个片段！：）您还可以为此使用并指定一个mixin。似乎不再需要指定光标。它将自动更改为
默认值用户选择：无MozUserSelectonselectstartonmousedowncursor: default;