我正在构建带有一些文本元素（例如选项卡名称）的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>
简单但有效...可在所有主要浏览器的当前版本中使用。
对于Firefox，您可以将CSS声明“ -moz-user-select”应用到“ none”。查看他们的文档，用户选择。
正如他们所说，这是对未来“用户选择”的“预览”，因此也许基于Opera或WebKit的浏览器将支持此功能。我还记得为Internet Explorer找到了一些东西，但我不记得是什么:)。
无论如何，除非在特定情况下文本选择使某些动态功能失败，否则您不应该真正覆盖用户对网页的期望，而是能够选择他们想要的任何文本。
我通过http://www.quirksmode.org/css/selection.html所述的CSS找到了一定程度的成功：
::selection {
background-color: transparent;
}
它解决了我ul在AIR应用程序（WebKit引擎）中使用一些ThemeRoller元素时遇到的大多数问题。仍然会得到一小片（大约15 x 15）的空白，但之前已选择了一半页面。
将div绝对定位在具有较高z索引的文本区域上，并为这些div提供透明的GIF背景图形。
注意再想一想-您需要链接这些“封面”，因此单击它们将您带到选项卡应放置的位置，这意味着您可以/应该将锚元素设置为display:box，宽度设置的高度和高度以及透明背景图像。
有关为什么可能希望抑制选择的示例，请参见SIMILE TImeline，它使用拖放来探索时间轴，在此期间意外的垂直鼠标移动会导致标签意外地突出显示，这看起来很奇怪。
对于Safari，-khtml-user-select: none就像Mozilla的-moz-user-select（或在JavaScript中一样target.style.KhtmlUserSelect="none";）。
“如果您的内容真的很有趣，那么最终您将无能为力。
是的，但是以我的经验，大多数复制与“最终”或极客或坚定的窃者或类似的东西无关。它通常是由无知的人随意复制的，甚至是一个简单的，容易被击败的保护措施（也就是像我们这样的人容易被击败的保护措施）都可以很好地制止他们。他们对“查看源代码”或缓存一无所知……哎呀，他们什至不知道什么是网络浏览器或正在使用浏览器。
这是针对那些感兴趣的Sass 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更改所选部分的外观。
Firebug可以轻松绕开任何JavaScript或CSS方法（例如Flickr的案例）。
您可以在CSS中使用::selection伪元素来更改突出显示颜色。
如果选项卡是链接，并且处于活动状态的虚线矩形值得关注，那么您也可以将其删除（当然要考虑可用性）。
在很多情况下，关闭选择功能可以增强用户体验。
例如，允许用户在页面上复制文本块而无需复制与之关联的任何界面元素的文本（这些元素将散布在要复制的文本中）。
也可以选择图像。
使用JavaScript取消选择文本是有局限性的，因为即使在您要选择的地方也可能发生。为确保事业的成功发展，请避开所有需要能力来影响或管理浏览器的要求，除非…当然，除非他们为您带来丰厚的回报。
如果删除删除的行，那么以下内容在Firefox中的工作就很有趣了。任何人都知道为什么需要写行。
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
文章标签：cross-browser , css , html , javascript , textselection
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！