禁用在 HTML 元素中选择文本

Disable selecting text inside HTML element

本文关键字：选择 文本 元素 HTML      更新时间：2023-09-26

我为用户添加了拖动选择文本进行复制的选项(使用 CSS 属性 user-select (。问题是它还从其他 HTML 元素复制文本：

<div class='select'>text</div>
<div class='no-select'>
    <b>no-select text</b>
</div>
<div class='select'>text</div>

所以我得到：

text
no-select text
text

有什么想法吗？

您可以使用

:before或:after伪元素来实现此目的：

.HTML

<div class="select">text</div>
<div class="no-select">
    <strong data-text="no-select text">no-select text</strong>
</div>
<div class="select">text</div>

.CSS

div.no-select > strong[data-text]:after {
    content: attr(data-text);
}

JSFiddle Demo

.no-select{ user-select: none; }

您可以使用user-select: none来实现此目的。只需注意兼容性，(http://caniuse.com/user-select-none(注意您必须为-ms-、-moz-和-webkit-提供供应商前缀。

请记住，如果 1( 用户使用的浏览器不支持此 CSS，或 2( 他们查看 HTML 源代码，他们仍然可以复制文本。

相关文章：