以编程方式禁用 CSS 文本选择

Posted 2023-03-06

【中文标题】以编程方式禁用 CSS 文本选择

【英文标题】：Disable CSS text selection programmatically

【发布时间】：2013-02-05 23:34:07

【问题描述】：

这似乎是重复的，但请继续阅读，因为它并不完全如此......我认为...... :) 我在这里遵循了答案：How do I disable text selection with CSS or javascript? 有一个扭曲。我想以编程方式禁用某些字段的选择，我在Chrome 中使用：

node.style.webkitUserSelect="none";

效果很好。但是，我为 Firefox 尝试了以下操作：

node.style.mozUserSelect="none";

但这不起作用。我还没有尝试过任何其他浏览器。有不同的方法可以做到这一点吗？所有的 CSS 规则都是这样的，它是一个“文档化标准”吗：

.rule 
    some-css-selector: value;

可以像下面这样翻译成 JavaScript 吗？

node.style.someCssSelector="value";

或者只是碰巧在某些情况下有效？

【问题讨论】：

尝试在其他一些浏览器特定的 css3 样式属性上执行此操作。我认为用户选择在浏览器之间的实现方式非常不同。例如，试试这个边界半径，让我们知道你发现了什么。希望这将为这个问题提供一些见解。

【参考方案1】：

对于带前缀的属性，前缀以大写字母开头，所以node.style.MozUserSelect="none";

【讨论】：

工作就像一个魅力！谢谢！作为记录，我还将 crome 特定代码更改为 node.style.WebkitUserSelect="none";它仍然有效。所以就像你说的那样，前缀属性应该以大写字母开头，看起来 chrome 更宽容一些..

【参考方案2】：

一种选择是创建一个 CSS 样式，然后以编程方式将该类添加到您想要的项目中：

HTML

<div id="container">
  This is some text that should not be selectable!
</div>

CSS

.noselect 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

JS

var container = document.getElementById("container");
container.className += " noselect";

jsfiddle

【讨论】：

啊，这很聪明...但是，在这种特殊情况下，由于各种原因，可能会或可能不会经过深思熟虑，我想避免依赖 CSS 文件中的类.