首页 >web前端 >css教程 >如何防止 HTML 页面上的文本选择?

如何防止 HTML 页面上的文本选择?

Patricia Arquette
Patricia Arquette原创
2024-12-29 13:20:10520浏览

How Can I Prevent Text Selection on My HTML Pages?

防止 HTML 页面上的文本选择

问题:

增强HTML 页面,如何使文本元素(如选项卡名称)不可选择以避免无意的选择

CSS/HTML 解决方案:

在大多数浏览器中,可以应用以下 CSS:

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

   -ms-user-select: none;
   user-select: none;
}

对于不突出显示的元素继承这个属性,比如在IE中

<div>

JavaScript 解决方案:

作为手动添加不可选择属性的递归替代方案对于容器内的每个元素,可以使用 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 页面上的文本选择?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn