有没有办法让DIV无法选择？

112

我有一个透明背景的textarea，覆盖了一些我想用作水印的TEXT。文字很大，占据了textarea的大部分。它看起来不错，问题是当用户点击textarea时，它有时会选择水印文本。我希望水印文本永远不可选择。我期待如果z-index中的东西更低，它将不可选，但浏览器在选择项目时似乎不关心z-index图层。有没有一种方法可以让DIV永远不会被选中？

来源

2009-05-29 Whozumommy

你会很乐意与一个JavaScript的解决方案吗？ – joshcomley 2009-05-29 08:14:32

你可以试试这个：

<div onselectstart="return false">your text</div>

来源

2009-05-29 08:13:54 Fortega

仍然可以通过双击进行选择。 – ceving 2015-12-14 17:38:56

不会为textarea的一个简单的背景图片就足够了？

来源

2009-05-29 08:15:48 Joey

透明的1x1 PNG应该工作，是啊 – 2009-05-29 08:17:56

嗯，我宁愿意味着水印，但透明的背景图像也可能工作。此外，你不应该平铺非常小的图像，因为一些浏览器在这种情况下得到极其缓慢:) – Joey 2009-05-29 08:22:32

尤其是因为1000x1000透明png（或gif）只有4kb。 – 2009-05-29 18:02:05

153

我写了一个简单的jQuery扩展来禁用选择的某些时候回来：Disabling Selection in jQuery。您可以通过$('.button').disableSelection();

或者调用它，使用CSS（跨浏览器）：

.button { 
     user-select: none; 
     -moz-user-select: none; 
     -khtml-user-select: none; 
     -webkit-user-select: none; 
     -o-user-select: none; 
}

来源

2009-05-29 08:17:00 aleemb

很棒！用户选择不是有效的CSS虽然。 – 2011-09-21 19:49:40

@kasperTaeymans感谢您指出了这一点。更新了片段。 – aleemb 2011-12-19 09:50:22

非常感谢...它工作得很好。 – YAM 2012-04-28 11:58:28

正如约翰已经提出，背景图像是probally独自在CSS实现这一目标的最佳途径。

JavaScript解决方案还必须影响“dragstart”才能在所有流行的浏览器中生效。

的JavaScript：

<div onselectstart="return false;" ondragstart="return false;">your text</div>

的jQuery：

var _preventDefault = function(evt) { evt.preventDefault(); }; 
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

丰富

来源

2009-05-29 08:22:36 kim3er

WebKit的浏览器（如谷歌Chrome和Safari）也有类似Mozilla的-moz-用户选择一个CSS的解决方案： none

.no-select{  
    -webkit-user-select: none; 
    cursor:not-allowed; /*makes it even more obvious*/ 
}

来源

2010-12-11 11:30:19 James

以下CSS代码几乎适用于现代浏览器：

.unselectable { 
    -moz-user-select: -moz-none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
}

对于IE，您必须在html标记中使用JS或插入属性。

<div id="foo" unselectable="on" class="unselectable">...</div>

来源

2011-04-07 13:37:08 KimKha

此外，在IOS，如果你想摆脱出现ontouch灰色半透明叠加，加上CSS：

-webkit-tap-highlight-color: rgba(0,0,0,0); 
-webkit-touch-callout: none;

来源

2013-04-17 08:31:11

刚刚更新aleemb的原创，备受upvoted答案有几个新增的到css。

我们已经使用了以下组合：

.unselectable { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
}

我们得到的建议从加入WebKit的触摸条目：
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015年四月：刚更新我自己的答案了变化可能派上用场。如果你需要让DIV选择/在飞行中不可选择，并愿意在JavaScript中使用Modernizr，下面的作品整齐地：

var userSelectProp = Modernizr.prefixed('userSelect'); 
    var specialDiv = document.querySelector('#specialDiv'); 
    specialDiv.style[userSelectProp] = 'none';

来源

2014-07-18 18:06:20

你可以在你的CSS使用pointer-events: none;