有没有办法使 HTML 页面上的文本不可选？

绝对位置的 div 在文本区域的 z 索引较高，并给这些 div 一个透明的 GIF背景图形。

经过深思熟虑后注意: 你需要把这些“封面”链接起来，点击它们就会把你带到选项卡应该在的位置，这意味着你可以/应该这样做，锚元素设置为 display:box，宽度和高度设置以及透明的背景图像。

图像也可以选择。

使用 JavaScript 取消选择文本是有限制的，因为即使在您想要选择的地方也可能发生这种情况。为了确保一个丰富和成功的职业生涯，避开所有需要影响或管理浏览器超越平常的能力的要求... 当然，除非他们给你非常好的薪水。

对于 Firefox，您可以将 CSS 声明“-moz-user-select”应用到“ none”。 看看他们的文件 < a href = “ http://developer.mozilla.org/En/CSS/-moz-user-select”rel = “ nofollow noReferrer”> user-select 。

正如他们所说，这是未来“用户选择”的“预览”，所以基于 歌剧或 WebKit的浏览器可能会支持这一点。我还记得找到了一些 Internet Explorer，但我不记得是什么了:)。

无论如何，除非在特定的情况下，文本选择会导致一些动态功能失败，否则你不应该真正覆盖用户对网页的期望，也就是能够选择他们想要的任何文本。

<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

试试这个:

<div onselectstart="return false">some stuff</div>

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

如果它看起来很糟糕，你可以使用 CSS 来改变选定部分的外观。

关于为什么可能需要禁止选择的例子，请参见 相似时间线，它使用拖放来探索时间线，在此期间，偶然的垂直鼠标移动导致标签意外突出显示，这看起来很奇怪。

我发现这里描述的 CSS 在某种程度上取得了成功。 http://www.quirksmode.org/css/selection.html:

::selection {
background-color: transparent;
}

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

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

有趣的是，如果我删除写入行，下面的代码就可以在 Firefox 中工作了。 任何人都知道为什么需要写入行。

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>

任何 JavaScript 或 CSS 方法都很容易被 Firebug 绕过(就像 Flickr 的案例)。

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

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

在大多数浏览器中，这可以通过 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"));

所有正确的 CSS 变体如下:

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

“如果你的内容真的很有趣，那么你能做的就很少了 最终会保护它”

这是真的，但是根据我的经验，大多数抄袭与“最终”、极客或者坚定的抄袭者或者类似的东西没有任何关系。这通常是愚蠢的人随意的抄袭，甚至一个简单的，容易被打败的保护(容易被像我们这样的人打败)工程相当好地阻止他们。他们不知道任何关于“查看源代码”或缓存或其他东西... 见鬼，他们甚至不知道什么是网络浏览器或他们正在使用一个。

在很多情况下，关闭可选性会增强用户体验。

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

这里有一个 无礼混合(scss)给感兴趣的用户，罗盘/CSS 3似乎没有用户选择的混合。

// @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 会以一种更加健壮的方式来完成，也就是说，只增加对您选择的供应商的支持。