HTML | DOM 样式 userSelect 属性

简介

userSelect 属性控制页面上文本能否被用户选择和复制。该样式属性可以应用于任何 HTML 元素并且支持全浏览器，包括 Internet Explorer。

语法

/* 关闭用户选择和复制 */
element {
  -webkit-user-select: none; /* Safari 和 Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* 所有浏览器 */
}

/* 开启用户选择和复制 */
element {
  -webkit-user-select: auto; /* Safari 和 Chrome */
  -moz-user-select: auto; /* Firefox */
  -ms-user-select: auto; /* Internet Explorer/Edge */
  user-select: auto; /* 所有浏览器 */
}

属性值

| 值 | 描述 | |-----|-----| | none | 禁止用户选择和复制 | | auto | 允许用户选择和复制 |

实例

以下两个例子演示了如何使用 userSelect 属性。

禁止文本选择

<p style="-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">这段文字不能被选择和复制</p>

允许文本选择

<p style="-webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto;">这段文字可以被选择和复制</p>

注意事项

• 除非有特定需求（比如网站设计或复制内容），否则不建议使用 userSelect 属性；
• 可以使用 JavaScript 实现更高级的文本选择和防止复制的方案；
• 当防止选择文本时，请确认您并没有剥夺用户访问特定文本内容的权利（比如网站条款或隐私政策）。

参考资料

• CSS user-select 属性
• CSS3 user-select Property