使用CSS里的user-select属性控制用户在页面上选中的内容
在网页中，用户可以通过鼠标或者键盘来进行选择和复制文本内容，在某些场景下，为了保护网站的版权或者用户的体验，我们希望能够限制用户在网页中选择和复制文本内容。CSS提供了[user-select属性](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) 来控制网页中的文本内容是否可以被选中和复制。本文将介绍如何使用user-select属性来控制用户在页面上选中的内容。
1. user-select属性
user-select属性控制用户在页面上选中的内容。其可选值有以下值：
- `auto`: 默认值，用户可以选择和复制文本内容
- `none`: 用户无法选择和复制文本内容
- `text`: 用户可以选择和复制文本内容，但不能选择非文本内容，例如图片和视频
- `all`: 用户可以选择和复制所有内容
2. 示例
2.1 禁止复制文本内容
如果我们希望禁止用户在页面中选择和复制文本内容，可以将user-select属性设置为none。
<p style="user-select:none;">这段文本不能被选择和复制</p>
效果如下图所示：
2.2 限制选择文本内容
有时候我们希望用户只能选择一部分文本内容，并且不能复制整个文本内容。这时候我们可以使用user-select属性和JavaScript来动态地控制文本内容的选择和复制。
首先，我们需要设置文本的user-select属性为none，禁止用户选择和复制文本。然后，我们可以使用JS来选择我们希望用户可以选择的文本内容，并添加一个copy事件监听器，当用户复制内容时，我们只复制被允许的文本内容。
<p class="selectable-text" style="user-select:none;">这些文字可以被选择</p>
<p class="unselectable-text" style="user-select:none;">这些文字不能被选择</p>
<script>
const selectableText = document.querySelector('.selectable-text');
selectableText.addEventListener('copy', (event) => {
event.preventDefault();
const selection = window.getSelection();
const selectedText = selection.toString().slice(0, 10); // 选择前十个字符
event.clipboardData.setData('text/plain', selectedText);
});
</script>
在上面的代码中，我们选取了class为`selectable-text`的标签，并添加了一个copy事件监听器。当用户复制文本的时候，我们首先调用了`event.preventDefault()`方法，阻止了默认的复制行为。然后，通过`window.getSelection()`方法得到用户选择的文本内容，由于我们希望用户只选择前十个字符，所以使用了`selection.toString().slice(0, 10)`方法。最后，我们通过`event.clipboardData.setData()`将内容添加到剪切板中。
效果如下图所示：
结束语
使用CSS里的user-select属性控制用户在页面上选中的内容，是一种很方便的方式控制文本的选择和复制。但是，由于该属性比较新，在一些低版本的浏览器中可能无法正常显示，请在使用时注意浏览器兼容性。