144

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

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

4

16 回答 16

201

在大多数浏览器中，这可以使用 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"));
于 2010-12-15T10:35:16.423 回答
41 
<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

于 2008-09-16T04:55:44.227 回答
34

所有正确的 CSS 变体是：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
于 2011-06-17T07:10:55.417 回答
13

试试这个：

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

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

于 2008-09-16T04:57:28.963 回答
11

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

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

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

于 2008-09-16T04:53:52.640 回答
8

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

::selection {
    background-color: transparent;
}

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

于 2009-02-12T15:15:15.627 回答
6

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

仔细考虑后注意 - 您需要链接这些“封面”，因此单击它们会将您带到标签应该位于的位置，这意味着您可以/应该在将锚元素设置为display:box, width的情况下执行此操作和高度设置以及透明背景图像。

于 2008-09-16T04:51:19.977 回答
4

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

于 2008-09-16T13:36:41.353 回答
4

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

于 2009-03-21T03:48:40.997 回答
3

“如果你的内容真的很有趣，那么你最终无法保护它”

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

于 2011-07-24T05:28:20.640 回答
3

这里有一个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 会以更强大的方式来实现，即只添加对您选择的供应商的支持。

于 2012-09-25T06:12:38.457 回答
1

也可以选择图像。

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

于 2008-09-16T04:51:48.820 回答
1

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

于 2008-09-16T05:51:30.270 回答
1

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

您可以使用 CSS 中的::selection伪元素来更改高亮颜色。

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

于 2010-07-23T16:55:58.753 回答
1

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

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

于 2011-11-21T23:07:47.240 回答
0

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

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
于 2010-07-23T16:49:37.853 回答