禁用在HTML元素中选择文本

时间:2013-06-20 12:12:20

标签: javascript html css html5

我添加了用户拖动选择文本进行复制的选项(使用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

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

您可以使用:before:after pseudo-elements完成此操作:

<强> 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

答案 1 :(得分:0)

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

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

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