在网页上,我们通常不应该禁用文本选择,但在某些情况下启用它会影响用户体验。通常,我们不想剥夺用户选择文本的能力,因为这会导致糟糕的用户体验。曾经有一段时间,少数网站会阻止用户复制文章文本作为阻止抄袭的一种方法,但幸运的是,这种情况在今天已经不常见了。
话虽如此,有很多例子表明禁用文本选择实际上可以改善用户体验。例如:
- 在触发事件的 HTML 元素上,尤其是在移动设备上 – 点击或双击可能会导致文本选择
- 在拖放界面上,用户必须拖动元素 – 我们不希望该拖动也触发文本选择。
- 在许多其他自定义 Web 构建的用户应用程序中,文本选择需要仅限于某些元素或情况。例如,在文本编辑器上,我们通常不希望使文本变为粗体的按钮是可选的,因为它是一个按钮。
如果您决定禁用文本选择,幸运的是,有一种简单的方法可以在 CSS 中完成此操作。
如何在 CSS 中禁用文本选择#
所有现代浏览器(某些版本的 Safari 除外)都支持该user-select
属性,这使得任何 HTML 元素都无法选择。例如,如果您希望所有按钮都不可选,您可以编写以下内容:
button {
-webkit-user-select: none;
user-select: none;
}
我们必须使用-webkit-user-select
,因为 Safari 仍然需要它。如果您想支持 Internet Explorer(越来越少见),您还可以使用-ms-user-select
:
button {
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
这个单一属性将停止用户选择。user-select
理论上,它还具有其他属性,但对这些属性的支持各不相同。
user-select: none
– 没有用户选择元素。user-select: text
– 您只能选择元素内的文本user-select: all
– 点击一次将选择整个元素内容。user-select: auto
– 默认情况下,您可以像往常一样选择所有内容。
您可以在 caniuse 上找到支持用户选择的完整最新列表。
为了向您展示每种方法的工作原理,以下是一些示例。请注意,两者text
都all
支持有限的 Safari,因此请考虑在 Chrome 中尝试这些。
用户选择设置为无
这相当于user-select: none
.
您将无法选择此文本!
用户选择设置为全部
这相当于user-select: all
.
点击一次将导致您选择所有文本。
用户选择设置为文本
这个例子与user-select: auto
.
您将只能选择此元素中的文本。