有没有办法使 HTML 页面上的文本不可选择？[复制]
https://stackoverflow.com/questions/69430
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
这个问题在这里已经有答案了：
- 如何禁用文本选择突出显示？ 40 个答案
我正在构建一个带有一些文本元素的 HTML UI，例如选项卡名称，这些元素在选择时看起来很糟糕。不幸的是，用户很容易双击选项卡名称，这在许多浏览器中默认选择它。
我也许可以用 JavaScript 技巧来解决这个问题（我也想看到这些答案）——但我真的希望 CSS/HTML 中有一些东西可以直接在所有浏览器上运行。
解决方案
在大多数浏览器中，这可以使用 CSS 来实现：
*.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 中的属性来设置它：
<div id="foo" unselectable="on" class="unselectable">...</div>
遗憾的是，这个属性不是继承的，这意味着您必须在每个元素的开始标记中放置一个属性 <div>. 。如果这是一个问题，您可以使用 JavaScript 为元素的后代递归地执行此操作：
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
其他提示
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
编辑
代码显然来自 http://www.dynamicdrive.com
所有正确的 CSS 变体是：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
尝试这个：
<div onselectstart="return false">some stuff</div>
简单，但有效...适用于所有主要浏览器的当前版本。
我发现这里描述的 CSS 取得了一定程度的成功 http://www.quirksmode.org/css/selection.html:
::selection {
background-color: transparent;
}
它解决了我在使用 ThemeRoller 时遇到的大部分问题 ul AIR 应用程序（WebKit 引擎）中的元素。仍然得到一个小的（大约。15 x 15) 一片虚无被选中，但之前已经选择了一半页面。
将 div 绝对定位在 z-index 较高的文本区域上，并为这些 div 提供透明 动图 背景图形。
经过更多思考后请注意 - 您需要链接这些“封面”，因此单击它们会将您带到选项卡应该所在的位置，这意味着您可以/应该将锚元素设置为 display:box, ，宽度和高度设置以及透明背景图像。
有关为什么可能需要抑制选择的示例，请参阅 相似时间线, ，它使用拖放来探索时间线，在此期间意外的垂直鼠标移动会导致标签意外突出显示，这看起来很奇怪。
对于野生动物园来说， -khtml-user-select: none, ，就像 Mozilla 的 -moz-user-select （或者，在 JavaScript 中， target.style.KhtmlUserSelect="none";).
“如果您的内容真的很有趣，那么您最终几乎无法做到保护”
确实如此，但根据我的经验，大多数复制与“最终”或极客或坚决的抄袭者或类似的东西无关。这通常是由无知的人随意复制的，即使是简单的、容易被击败的保护（很容易被像我们这样的人击败）也能很好地阻止它们。他们对“查看源代码”或缓存或其他任何东西一无所知......哎呀，他们甚至不知道什么是网络浏览器，也不知道他们正在使用网络浏览器。
这是一个 萨斯 mixin (scss) 对于那些感兴趣的人。 罗盘/CSS 3 似乎没有用户选择的 mixin。
// @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 会以更稳健的方式做到这一点，即仅添加对您选择的供应商的支持。
如果看起来很糟糕，您可以使用 CSS 来更改所选部分的外观。
任何 JavaScript 或 CSS 方法都可以通过 Firebug 轻松绕过（如 Flickr 的情况）。
您可以使用 ::selection 伪元素 在 CSS 中更改突出显示颜色。
如果选项卡是链接并且 活动状态下的虚线矩形 值得关注，您也可以将其删除（当然要考虑可用性）。
在很多情况下，关闭选择性可以增强用户体验。
例如，允许用户复制页面上的文本块，而不复制与其关联的任何界面元素的文本（这将散布在正在复制的文本中）。
也可以选择图像。
使用 JavaScript 取消选择文本是有限制的，因为即使在您想要选择的地方也可能发生这种情况。为了确保职业生涯的丰富和成功，请避开所有需要影响或管理浏览器的能力超出普通范围的要求......当然，除非他们给你很高的报酬。
有趣的是，以下内容在 Firefox 中有效，如果我删除写入行，它就不起作用。任何人都知道为什么需要写入线。
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
