Is there a way to make a DIV unselectable?

问题:

Here is an interesting CSS questions for you!

I have a textarea with a transparent background overlaying some TEXT that I'd like to use as a sort of watermark. The text is large and takes up a majority of the textarea. It looks nice, the problem is when the user clicks in the textarea it sometimes selects the watermark text instead. I want the watermark text to never be selectable. I was expecting if something was lower in the z-index it would not be selectable but browsers don't seem to care about z-index layers when selecting items. Is there a trick or way to make it so this DIV is never selectable?

回答1:

I wrote a simple jQuery extension to disable selection some time back: Disabling Selection in jQuery. You can invoke it through $('.button').disableSelection();

Alternately, using CSS (cross-browser):

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

回答2:

The following CSS code works almost modern browser:

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

For IE, you must use JS or insert attribute in html tag.

...
 

回答3:

Just updating aleemb's original, much-upvoted answer with a couple of additions to the css.

We've been using the following combo:

.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; } 

We got the suggestion for adding the webkit-touch entry from:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Apr: Just updating my own answer with a variation that may come in handy. If you need to make the DIV selectable/unselectable on the fly and are willing to use Modernizr, the following works neatly in javascript:

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

回答4:

As Johannes has already suggested, a background-image is probally the best way to achieve this in CSS alone.

A JavaScript solution would also have to affect "dragstart" to be effective across all popular browsers.

JavaScript:

your text
 

jQuery:

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

Rich

回答5:

you can try this:

your text
 

回答6:

Wouldn't a simple background image for the textarea suffice?

回答7:

You can use pointer-events: none; in your CSS

div {   pointer-events: none; } 

回答8:

WebKit browsers (ie Google Chrome and Safari) have a CSS solution similar to Mozilla's -moz-user-select:none

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

回答9:

Also in IOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add css:

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

回答10:

Use

onselectstart="return false"

it prevents copying your content.

回答11:

Make sure that you set position explicitly as absolute or relative for z-index to work for selection. I had a similar issue and this solved it for me.

回答12:

Not sure of your use case, but you could make it draggable.

文章来源: Is there a way to make a DIV unselectable?