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

Question

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

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

经过更多思考后请注意 - 您需要链接这些“封面”，因此单击它们会将您带到选项卡应该所在的位置，这意味着您可以/应该将锚元素设置为 display:box，宽度和高度设置以及透明背景图像。

Answer 4

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

::selection {
    background-color: transparent;
}

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

Answer 5

“如果您的内容真的很有趣，那么您几乎无能为力
最终要保护它”

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

Answer 6

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

Answer 7

这是一个 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 会以更强大的方式做到这一点，即仅添加对您选择的供应商的支持。

Answer 8

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

Answer 9

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

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

如果选项卡是链接并且 点状处于活动状态的矩形值得关注，您也可以将其删除（当然要考虑可用性）。

Answer 10

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

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

Answer 11

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

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

Answer 12

也可以选择图像。

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

Answer 13

试试这个：

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

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

Answer 14

所有正确的 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 15

<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

Answer 16

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

遗憾的是，该属性不是继承的，这意味着您必须将属性放在

内每个元素的开始标记中。 如果这是一个问题，您可以使用 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"));