¿Hay alguna manera de hacer que un DIV no sea seleccionable?

Question

Aquí hay unas interesantes preguntas de CSS para ti.

Tengo un área de texto con un fondo transparente que sobrepone un TEXTO que me gustaría usar como una especie de marca de agua. El texto es grande y ocupa la mayoría del área de texto. Se ve bien, el problema es que cuando el usuario hace clic en el área de texto, a veces selecciona el texto de la marca de agua. Quiero que el texto de la marca de agua nunca sea seleccionable. Esperaba que si algo bajaba en el índice Z no fuera seleccionable, pero los navegadores no parecen preocuparse por las capas del índice Z cuando seleccionan elementos. ¿Hay algún truco o forma de hacerlo así que este DIV nunca es seleccionable?

Answer 1

puede probar esto:

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

Answer 2

No sería una imagen de fondo simple para el área de texto es suficiente?

Answer 3

Escribí una extensión jQuery simple para deshabilitar la selección hace algún tiempo: Disabling Selection in jQuery. Puede invocar a través de $('.button').disableSelection();

Como alternativa, el uso de CSS (cross-browser):

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

Answer 4

Como Johannes ya se ha sugerido, una imagen de fondo es problablemente la mejor manera de lograr esto en CSS solo.

Una solución de JavaScript también tendría que afectar a "dragstart" para que sea efectiva en todos los navegadores populares.

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); 

Rich

Answer 5

navegadores WebKit (es decir, Google Chrome y Safari) tienen una solución CSS similar a -moz-user-select de Mozilla: ninguno

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

Answer 6

El siguiente código CSS funciona casi navegador moderno:

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

Para IE, debe utilizar JS o insertar atributo de etiqueta html.

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

Answer 7

También en IOS si usted quiere deshacerse de superposiciones semitransparentes grises que aparecen ontouch, añadir CSS:

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

Answer 8

Sólo la actualización respuesta original, tanto upvoted-de aleemb con un par de adiciones a el css.

que hemos estado usando la siguiente combinación:

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

Tenemos la sugerencia para añadir la entrada webkit-touch desde:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Abr: Sólo la actualización mi propia respuesta con una variación que puede ser útil.Si necesita hacer el seleccionable DIV/no seleccionable sobre la marcha y está dispuesto a utilizar Modernizr, las siguientes obras de forma ordenada en javascript:

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

Answer 9

Puede utilizar pointer-events: none; en su CSS

div { 
    pointer-events: none; 
} 

Answer 10

Uso

onselectstart = "return false"

previene la copia de su contenido.

Answer 11

Asegúrese de establecer la posición explícitamente como absoluta o relativa para que z-index funcione para la selección. Tuve un problema similar y esto lo resolvió para mí.

Answer 12

No estoy seguro de su caso de uso, pero podría hacerlo arrastrable.