有沒有辦法讓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;