有没有办法使 HTML 页面上的文本无法选择？ [复制]答案

【问题标题】：Is there a way to make text unselectable on an HTML page? [duplicate]有没有办法使 HTML 页面上的文本无法选择？ [复制]
【发布时间】：2010-09-09 07:48:21
【问题描述】：

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

我或许可以通过 JavaScript 技巧来解决这个问题（我也希望看到这些答案）——但我真的希望 CSS/HTML 中有一些东西可以直接在所有浏览器上运行。

【问题讨论】：

虽然这里列出的许多示例都有效，但请记住，没有什么能阻止人们只查看源代码并复制文本。
根据您的需要stackoverflow.com/q/4117466/298479 也可能是您的有效解决方案。

标签： javascript html css cross-browser textselection

【解决方案1】：

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

经过深思熟虑后请注意 - 您需要链接这些“封面”，以便单击它们会将您带到标签应该位于的位置，这意味着您可以/应该使用锚元素集执行此操作到display:box，设置宽度和高度以及透明背景图片。

【讨论】：

这就是 flickr 所做的
这种黑客行为太可怕了。我个人会避免它。
这个方法的小问题是链接，正如你提到的，以及你想与主窗口进行的任何其他交互......

【解决方案2】：

也可以选择图片。

使用 JavaScript 取消选择文本是有限制的，因为即使在您要选择的地方也可能发生这种情况。为确保事业有成并取得成功，请避开所有需要能够影响或管理浏览器的要求...当然，除非他们支付给您的薪水非常高。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

在 Safari/Chrome/etc 中也是如此。 -khtml-user-select:none;
这可能出现在 CSS 标准中吗？

【解决方案4】：

<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

【讨论】：

Opera 是否有任何更新或使元素无法选择仍然不受支持？
为什么在最后一种情况下将光标样式更改为“默认”？否则 +1
事实上，你在所有情况下都在改变它（缩进是误导）

【解决方案5】：

试试这个：

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

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

【讨论】：

这对我在 Firefox 中不起作用。
这是 IE 唯一的属性。这使它变得多余。
非常适合我们的应用（我们只针对 IE 用户）。
这是我在 ag-Grid 中进行 shift-click 选择时获得在 IE11 中发生文本选择所需效果的唯一方法。

【解决方案6】：

如果看起来不好，您可以使用 CSS 来更改所选部分的外观。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我发现使用此处描述的 CSS http://www.quirksmode.org/css/selection.html:

取得了一定程度的成功

::selection {
    background-color: transparent;
}

它解决了我在使用 AIR 应用程序（WebKit 引擎）中的一些 ThemeRoller ul 元素时遇到的大部分问题。仍然有一小块（大约 15 x 15）的虚无被选中，但之前有一半的页面被选中。

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

如果我删除它不起作用的写入行，以下在 Firefox 中的工作很有趣。任何人都知道为什么需要写入行。

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

【讨论】：

我猜 body 在它有内容之前可能无法在 DOM 中访问，因此在你在文档中写东西之前你不能设置它的样式。

【解决方案11】：

使用 Firebug 可以轻松绕过任何 JavaScript 或 CSS 方法（例如 Flickr 的情况）。

您可以在 CSS 中使用 ::selection pseudo-element 来更改高亮颜色。

如果标签是链接并且dotted rectangle in active state 值得关注，您也可以将其删除（当然要考虑可用性）。

【讨论】：

【解决方案12】：

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

【讨论】：

你可以使用这个选择器 [unselectable=on]{...} 然后你就避免了额外的类
根据dev.l-c-n.com/CSS3-selectors/browser-support.php，IE8及以上版本应该支持这个选择器，IE7可能也支持。
@JoeCoder：是的，我相信属性选择器在 IE 7 中确实可以工作，虽然不是 IE 6。
只是好奇，在样式表中使用 *.unselectable 比 .unselectable 有优势吗？
@venimus 我更喜欢类而不是 xpath 选择器，例如 CSS 中的 [unselectable=on]。在 jquery 中，如果您首先缩小到直接容器，它们会很好，但在 CSS 中，选择器从右到左解析，因此它仍然是使用 performance-meh xpath 引擎对每个元素和每个元素的不可选择属性进行全面检查。同样，我相信，我猜测的 querySelector API 通常会直接连接到 CSS/xpath 选择器引擎。随着浏览器发现性能调整，这可能会随着时间的推移而改变，但在支持 IE

【解决方案13】：

所有正确的 CSS 变体是：

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

【讨论】：

根据这个Answer，这两个webkit设置的顺序可能很关键，-webkit-user-select:应该在-webkit-touch-callout:之前。我还没有验证这一点。

【解决方案14】：

“如果你的内容真的很有趣，那么你可以做的很少最终要保护它”

确实如此，但根据我的经验，大多数抄袭与“最终”、极客或坚决的抄袭者或类似的事情无关。这通常是无知的人随便抄袭，即使是简单的、容易被击败的保护（很容易被我们这样的人击败）也能很好地阻止他们。他们对“查看源代码”或缓存或其他任何东西一无所知……哎呀，他们甚至不知道网络浏览器是什么，也不知道他们正在使用什么。

【讨论】：

【解决方案15】：

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

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

【讨论】：

【解决方案16】：

这里有一个Sass mixin (scss) 供感兴趣的人使用。 Compass/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 会以更强大的方式来做这件事，即只添加对您选择的供应商的支持。

【讨论】：