que - selector padre css

¿Hay alguna manera de hacer un DIV no seleccionable?

Question

¡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?

Answer 1

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

Answer 2

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í.

Answer 3

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:

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

jQuery:

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

Rico

Answer 4

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.

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

Answer 5

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*/
}

Answer 6

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

Answer 7

Puede usar pointer-events: none; en tu CSS

div {
  pointer-events: none;
}

Answer 8

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

Answer 9

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;

Answer 10

Utilizar

onselectstart = "return false"

Impide copiar tu contenido.

Answer 11

puedes probar esto:

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

Answer 12

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