如何防止 HTML 页面上的文本选择？-css教程-PHP中文网

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

Susan Sarandon

发布： 2024-12-14 16:46:19

原创

714 人浏览过

How Can I Prevent Text Selection on My HTML Page?

取消选择 HTML 页面上的文本：综合指南

在用户体验领域，最好防止在 HTML 页面上选择文本HTML 页面中的某些元素。这对于选项卡名称等元素尤其重要，这些元素在突出显示时可能显得毫无吸引力。

CSS 解决方案

幸运的是，大多数现代浏览器都提供基于 CSS 的解决方案：

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

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

登录后复制

只需将此代码添加到您的样式表中，指定的元素就会变成不可选择。

IE 和 Opera 替代方案

对于早期版本的 Internet Explorer 和 Opera，可以使用不可选择属性：

<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中文网其他相关文章！