¿Hay alguna manera de hacer un DIV no seleccionable?

¡Aquí hay unas interesantes preguntas de CSS para ti!

Tengo un área de texto con un fondo transparente sobre 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?

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

Alternativamente, usando CSS (navegador cruzado):

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

El siguiente código CSS funciona con un navegador casi 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 usar JS o insertar atributo en la etiqueta html.

 
...

Simplemente actualicé la respuesta original, muy votada, de aleemb con un par de adiciones al CSS.

Hemos estado usando el siguiente 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; } 

Recibimos la sugerencia de agregar la entrada webkit-touch de:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

Abril 2015: solo actualizo mi propia respuesta con una variación que puede ser útil. Si necesita hacer que el DIV sea seleccionable / no seleccionable sobre la marcha y esté dispuesto a usar Modernizr , lo siguiente funciona perfectamente en javascript:

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

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

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

JavaScript:

 
your text

jQuery:

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

Rico

puedes probar esto:

 
your text

¿No bastaría con una simple imagen de fondo para el área de texto?

Puede usar pointer-events: none; en tu CSS

 div { pointer-events: none; } 

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

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

También en IOS si desea deshacerse de superposiciones semitransparentes grises que aparecen ontouch, agregue css:

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

Utilizar

onselectstart = “return false”

Impide copiar tu contenido.

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

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