如何在 HTML UI 中禁用文本选择？

禁用文本选择以增强 UI 体验

设计 HTML 用户界面时，某些文本元素（如选项卡名称）在选择时可能看起来不合需要。为了防止这种情况，请考虑实施以下方法之一。

CSS 解决方案

对于大多数浏览器，以下 CSS 样式可能会使文本无法选择：

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

IE 和 Opera 的 HTML 属性

对于IE（版本 10 以下）和 Opera 等浏览器，请使用不可选择属性：

<div>

JavaScript Recursion for Extreaching Unselectable Areas

对于涉及嵌套的情况，使用 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"));

以上是如何在 HTML UI 中禁用文本选择？的详细内容。更多信息请关注PHP中文网其他相关文章！