html - 使文本只读/不可选择

Question

我正在尝试使用内联 CSS 将一些文本设置为只读。在使用标准 html 页面进行测试时，这两种方法都可以正常工作。

Firefox 语法:

<div style="-moz-user-select: none;">Some text</div>

Chrome 语法:

<div style="-webkit-user-select: none;">Some text</div>

但是，我正在尝试在 CMS 产品中使用的文本编辑器中使用此语法。它适用于 firefox 但不适用于 Chrome。我也尝试过使用最基本的方法也不起作用:

<div style="user-select: none;">Some text</div>

我的问题是，是否有任何其他方法可以使用内联 CSS(或 HTML)来禁用文本 block 。因为我们使用的是免费文本编辑器，所以我们不能使用任何 HTML 输入类型。

Answer 1

可以将所有三个内联 CSS 组合如下:

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Some text</div>

这样它应该适用于您提到的所有浏览器。可以将此 css 包装到链接帖子中建议的一个类中作为引用自 How to disable text selection highlighting using CSS? 的解释:

-webkit-touch-callout: none; /* iOS Safari /
-webkit-user-select: none; / Chrome/Safari/Opera /
-khtml-user-select: none; / Konqueror /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / Internet Explorer/Edge /
user-select: none; / Non-prefixed version, currently not supported by any browser */

也可以使用一些 javascript 属性来防止选择:

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">Some text</div>