首页 / 知识

关于javascript：有没有办法让HTML页面上的文本无法选择？

2023-04-15 18:08:00

Is there a way to make text unselectable on an HTML page?

本问题已经有最佳答案，请猛点这里访问。

我正在构建一个包含一些文本元素的HTML UI，例如选项卡名称，这些元素在选中时看起来很糟糕。不幸的是，用户很容易双击选项卡名称，默认情况下会在许多浏览器中选择它。

我或许可以通过JavaScript技巧来解决这个问题(我也希望看到这些答案) - 但我真的希望CSS / HTML中的某些东西直接适用于所有浏览器。

在大多数浏览器中，这可以使用CSS实现：

1
2
3
4
5
6
7
8
9
10
11
12

*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;

/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}

对于IE <10和Opera，您需要使用您希望不可选择的元素的unselectable属性。您可以使用HTML中的属性进行设置：

...

遗憾的是，这个属性不是继承的，这意味着你必须在内的每个元素的开始标记中放置一个属性。如果这是一个问题，您可以使用JavaScript以递归方式为元素的后代执行此操作：

1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

编辑

代码显然来自http://www.dynamicdrive.com

所有正确的CSS变体都是：

1
2
3
4
5
6

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

尝试这个：

1	some stuff

简单但有效......适用于所有主流浏览器的当前版本。

对于Firefox，您可以将CSS声明"-moz-user-select"应用于"none"。
查看他们的文档，用户选择。

这是他们所说的未来"用户选择"的"预览"，因此Opera或基于WebKit的浏览器可能会支持它。我还记得为InternetExplorer找到了一些东西，但我不记得是什么:)。

无论如何，除非是特定的情况，文本选择使一些动态功能失败，你不应该真正覆盖用户期望从网页，并且能够选择他们想要的任何文本。

我发现这里描述的CSS有一定程度的成功http://www.quirksmode.org/css/selection.html：

1
2
3

::selection {
background-color: transparent;
}

它解决了AIR应用程序(WebKit引擎)中的一些ThemeRoller ul元素所遇到的大多数问题。仍然会得到一个小的(大约15 x 15)虚拟补丁被选中，但之前选择了一半的页面。

绝对地将文本区域上的div放在z-index较高的位置，并为这些div提供透明的GIF背景图形。

注意一点之后 - 你需要将这些'封面'链接起来，所以点击它们会把你带到选项卡所在的位置，这意味着你可以/应该将锚元素设置为，宽度和高度设置以及透明背景图像。

对于Safari，-khtml-user-select: none，就像Mozilla的-moz-user-select(或者，在JavaScript中，target.style.KhtmlUserSelect="none";)。

有关为什么可能需要抑制选择的示例，请参阅SIMILE TImeline，它使用拖放来探索时间轴，在此期间，意外的垂直鼠标移动会导致标签意外突出显示，这看起来很奇怪。

对于那些感兴趣的人来说，这是一个Sass mixin(scss)。 Compass / CSS3似乎没有用户选择mixin。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
& {
-webkit-touch-callout: $value;
-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
}

虽然Compass会以更强大的方式完成它，即只添加对您选择的供应商的支持。

"If your content is really interesting, then there is little you can
ultimately do to protect it"

这是真的，但根据我的经验，大多数复制与"最终"或极客或确定的抄袭者或类似的东西无关。它通常是由无知的人随意复制，甚至一个简单的，容易被击败的保护(很容易被像我们这样的人打败)就可以很好地阻止他们。他们对"查看源"或缓存或其他任何事情一无所知......哎呀，他们甚至不知道Web浏览器是什么，或者他们正在使用它。

如果它看起来很糟糕，您可以使用CSS来更改所选部分的外观。

任何JavaScript或CSS方法都很容易被Firebug规避(就像Flickr的情况一样)。

您可以使用CSS中的::selection伪元素来更改突出显示颜色。

如果选项卡是链接并且处于活动状态的虚线矩形是关注的，您也可以删除它(当然考虑可用性)。

关闭可选性有很多时候可以增强用户体验。

例如，允许用户复制页面上的文本块而不复制与其相关联的任何界面元素的文本(这些文本将散布在正被复制的文本中)。

也可以选择图像。

使用JavaScript取消选择文本是有限制的，因为即使在您想要选择的地方也可能发生这种情况。为了确保丰富而成功的职业生涯，避开所有需要影响或管理浏览器的能力的所有要求......当然，除非他们付出的代价非常高。

如果我删除写行不起作用，以下在Fi??refox中工作有趣。
任何人都知道为什么需要写行。

1
2
3