Question

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

我或许可以通过JavaScript技巧来解决这个问题（我也希望看到这些答案） - 但我真的希望CSS / HTML能直接在所有浏览器中使用。

Answer 1

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

Answer 2

<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 3

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

试试这个：

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

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

Answer 5

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

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

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

Answer 6

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

::selection {
    background-color: transparent;
}

它解决了我在AIR应用程序（WebKit引擎）中使用一些ThemeRoller ul元素时遇到的大多数问题。仍然会得到一个小的（大约15 x 15）虚拟补丁被选中，但之前选择了一半的页面。

Answer 7

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

请注意一点 - 您需要将这些“封面”链接起来，因此点击它们会将您带到选项卡所在的位置，这意味着您可以/应该使用锚元素集来执行此操作设置为display:box，设置宽度和高度以及透明背景图像。

Answer 8

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

Answer 9

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

Answer 10

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

这是真的，但根据我的经验，大多数复制与“最终”或极客或确定的剽窃者或类似的东西无关。它通常是由无知的人随意复制，甚至一个简单的，容易被击败的保护（很容易被像我们这样的人打败）就可以很好地阻止他们。他们对“查看源”或缓存或其他任何内容一无所知......哎呀，他们甚至不知道Web浏览器是什么，或者他们正在使用它。

Answer 11

这是感兴趣的人的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 12

也可以选择图像。

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

Answer 13

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

Answer 14

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

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

有没有办法在HTML页面上使文本无法选择？

16 个答案: