Textauswahl deaktivieren - CSS

在某些情况下，您可能希望禁用用户对网站文本进行选择。这可以防止他们复制和粘贴内容或查看网站源代码。使用CSS user-select属性可以实现此目的。

实现文本选择的禁用

为body元素添加以下CSS规则可以禁用网站上的文本选择：

body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

这将禁用整个页面上的文本选择。

选择特定元素

您也可以使用相同的CSS规则来禁用特定元素上的文本选择。例如，以下代码将禁用ID为 no-select 的元素上的文本选择：

#no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

可选择文本元素

如果您希望仅禁用某些元素的文本选择，您可以将它们设置为none。其他元素将保留其默认属性，即允许选择。

例如，以下代码将禁用类名为no-select的元素上的文本选择，但保留其他元素的文本选择：

.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/* 保留选择的元素 */
.yes-select {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

总结

使用CSS的user-select属性可以轻松地禁用文本选择，不仅可以禁用整个页面上的文本选择，还可以限制选择的元素。