有没有一种方法可以使HTML页面上的文本不可选？
有没有一种方法可以使HTML页面上的文本不可选？
提问于 2008-09-16 04:39:51
我正在构建一个HTML，其中包含一些文本元素，比如选项卡名，这些元素在被选中时看起来很糟糕。不幸的是，用户双击选项卡名非常容易，这在许多浏览器中都是默认选中的。
我也许可以使用JavaScript技巧来解决这个问题(我也希望看到这些答案) --但是我真的希望在CSS/HTML中有一些可以直接在所有浏览器上工作的东西。
回答 13
Stack Overflow用户
回答已采纳
发布于 2010-12-15 18:35:16
在大多数浏览器中，这可以使用CSS来实现：
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}对于IE < 10和Opera，您需要使用您希望不可选择的元素的unselectable属性。您可以使用HTML中的属性对其进行设置：
<div id="foo" unselectable="on" class="unselectable">...</div>遗憾的是，这个属性不是继承的，这意味着您必须在<div>内的每个元素的开始标记中放置一个属性。如果这是一个问题，您可以改用JavaScript来递归地为元素的后代执行此操作：
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));Stack Overflow用户
发布于 2011-06-17 15:10:55
所有正确的CSS变体都是：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;Stack Overflow用户
发布于 2008-09-16 04:57:29
试试这个：
<div onselectstart="return false">some stuff</div>简单但有效的..。适用于所有主要浏览器的当前版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69430
复制相关文章
相似问题