如何使HTML文本不可选
我想添加文字到我的网页作为标签，并使其无法select。
换句话说，当鼠标光标在文本上时，我希望它不会变成文本select光标。
我试图达到的一个很好的例子是这个网站上的button（问题，标签，用户…）
你不能用普通的香草HTML来做到这一点，所以JSF在这里也不能为你做很多事情。
如果您只针对体面的浏览器 ，那么只需使用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>
没有人在这里发布了所有正确的CSS变体的答案，所以这里是：
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
完全现代化的解决scheme纯粹是基于CSS的，但请注意，以前的浏览器将不支持它，在这种情况下，您需要回退到其他人提供的解决scheme。
所以在纯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很漂亮。
我修改了上面发布的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(); });
