有没有一种方法可以让HTML页面上的文本不能被选择？

43 浏览
0 Comments

有没有一种方法可以让HTML页面上的文本不能被选择？

这个问题已经有了答案:

如何禁用文本选择高亮

我正在构建一个带有一些文本元素的HTML用户界面，例如选项卡名称，当选择它们时看起来很糟糕。不幸的是，许多浏览器默认情况下双击选项卡名称会将其选中，这很容易被用户误操作。

我可能可以用JavaScript技巧解决这个问题（我也想看看这些答案）--但我真的希望有一种CSS/HTML直接适用于所有浏览器的方法。

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

编辑

代码显然来自http://www.dynamicdrive.com

0
0 Comments

在大多数浏览器中，可以使用 CSS 实现此功能：
\n

*.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;
}

\n对于 IE < 10 和 Opera，需要使用要使其无法选取的元素的 unselectable 属性。您可以在 HTML 中使用属性设置它：
\n

...

\n不幸的是，此属性不能被继承，这意味着您必须在 中的每个元素的开始标记中放置一个属性。如果这是问题，您可以使用 JavaScript 递归地为元素的后代实现此功能：
\n

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"));

0