一尘不染

有没有办法使HTML页面上的文本无法选择?

css

我正在构建带有一些文本元素(例如选项卡名称)的HTML
UI,这些文本元素在被选中时看起来很糟糕。不幸的是,对于用户来说,双击选项卡名称非常容易,该名称在许多浏览器中都是默认选择的。

我也许可以用JavaScript技巧解决这个问题(我也想看看那些答案),但是我真的希望CSS / HTML中的某些功能可以直接在所有浏览器中使用。


阅读 534

收藏
2020-05-16

共1个答案

一尘不染

在大多数浏览器中,可以使用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"));
2020-05-16