如何使网站上的文本不可选择

有时候，在网站上需要保护一些敏感信息，或者不希望用户将某些文本复制到剪贴板上，我们需要将网站上的文本设置为不可选择。本文将介绍几种实现方法。

使用CSS属性 user-select

CSS提供了一个属性 user-select，可以设置文本是否可被选择，有以下属性值：

• none：文本内容和文本框内容不能被选择
• auto：文本内容和文本框内容可以被选择
• text：文本内容可以被选择

示例代码：

.noselect{
  user-select: none;
}

在HTML中使用该CSS类即可将该元素内的文本设置为不可选择：

<div class="noselect">
  这段文本将不会被选中
</div>

使用JavaScript禁用选择

另一种方法是使用JavaScript禁用选择。我们可以通过添加 onselectstart 和 onmousedown 事件，阻止元素文本的选择：

<div onselectstart="return false" onmousedown="return false">
  这段文本将不会被选中
</div>

但需要注意的是，这种方法无法防止通过剪贴板复制文本的操作。

使用jQuery插件

还可以使用jQuery插件来实现文本不可选择。例如，jquery.disabletextselect.js 插件提供了一种简单的方法来使用jQuery禁用选择。

<script src="jquery.1.11.3.min.js"></script>
<script src="jquery.disabletextselect.js"></script>
<script>
  $(function(){
    $('body').disableSelection();
  });
</script>

添加后，页面中的所有文本都将不可选择。

总结

本文介绍了三种方法使网站上的文本不可选择：使用CSS属性 user-select、使用JavaScript禁用选择和使用jQuery插件。在使用时需要考虑到不同的情况和场景，选择最适合的方法。