¿Hay alguna manera de hacer que el texto no se pueda seleccionar en una página HTML?

Question

Estoy construyendo una IU HTML con algunos elementos de texto, como los nombres de las pestañas, que se ven mal cuando se seleccionan. Desafortunadamente, es muy fácil para un usuario hacer doble clic en el nombre de una pestaña, que lo selecciona de forma predeterminada en muchos navegadores.

Podría ser capaz de resolver esto con un truco de JavaScript (me gustaría ver esas respuestas, también) - pero realmente espero que haya algo en CSS/HTML directamente que funcione en todos los navegadores.

Answer 1

En la mayoría de los navegadores, esto se puede lograr usando CSS:

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

    /* 
    Introduced in IE 10. 
    See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ 
    */ 
    -ms-user-select: none; 
    user-select: none; 
} 

para IE y Opera < 10, que tendrá que utilizar el atributo unselectable del elemento que desea ser seleccionable. Puede hacer esto usando un atributo en HTML:

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

Por desgracia, esta propiedad no es hereditaria, lo que significa que tiene que poner un atributo en la etiqueta de inicio de cada elemento dentro de la <div>. Si esto es un problema, en su lugar podría usar JavaScript para hacer esto de forma recursiva para los descendientes de un elemento:

function makeUnselectable(node) { 
    if (node.nodeType == 1) { 
     node.setAttribute("unselectable", "on"); 
    } 
    var child = node.firstChild; 
    while (child) { 
     makeUnselectable(child); 
     child = child.nextSibling; 
    } 
} 

makeUnselectable(document.getElementById("foo")); 

Answer 2

Coloque absolutamente divs sobre el área de texto con un índice z más alto y dé a estos divs un gráfico de fondo transparente GIF.

Nota después de un poco más de pensamiento - Tendría que tener estas 'coberturas' vinculadas para hacer clic en ellas lo llevarían a donde se suponía, lo que significa que podría/debería hacer esto con el elemento de anclaje establecido en display:box, conjunto de ancho y alto, así como la imagen de fondo transparente.

Answer 3

También se pueden seleccionar imágenes.

Existen límites al uso de JavaScript para anular la selección de texto, como podría suceder incluso en los lugares donde desea seleccionar. Para garantizar una carrera exitosa y rica, evite todos los requisitos que necesiten la capacidad de influir o administrar el navegador más allá de lo normal ... a menos que, por supuesto, le estén pagando extremadamente bien.

Answer 4

Para Firefox puede aplicar la declaración de CSS "-moz-user-select" a "none". Consulte su documentación, user-select.

Es una "vista previa" del futuro "user-select" como se dice, así que tal vez Opera o WebKit-based browsers serán compatibles. También recuerdo haber encontrado algo para Internet   Explorer, pero no recuerdo qué :).

De todos modos, a menos que sea una situación específica donde la selección de texto hace que falle alguna funcionalidad dinámica, no debe anular realmente lo que los usuarios esperan de una página web, y eso es poder seleccionar cualquier texto que deseen.

Answer 5

<script type="text/javascript"> 

/*********************************************** 
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 

***********************************************/ 


function disableSelection(target){ 

    if (typeof target.onselectstart!="undefined") //IE route 
     target.onselectstart=function(){return false} 

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route 
     target.style.MozUserSelect="none" 

    else //All other route (ie: Opera) 
     target.onmousedown=function(){return false} 

    target.style.cursor = "default" 
} 



//Sample usages 
//disableSelection(document.body) //Disable text selection on entire body 
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv" 


</script> 

EDITAR

Código aparentemente proviene de http://www.dynamicdrive.com

Answer 6

Prueba esto:

<div onselectstart="return false">some stuff</div> 

simple, pero efectiva ... funciona en las versiones actuales de los navegadores más importantes.

Answer 7

Si se ve mal, puede usar CSS para cambiar la apariencia de las secciones seleccionadas.

Answer 8

Para un ejemplo de por qué podría ser deseable suprimir la selección, ver SIMILE TImeline, que utiliza de arrastrar y soltar para explorar la línea de tiempo, durante el cual el movimiento del ratón vertical de accidental hace que las etiquetas a destacar de forma inesperada, que se ve raro.

Answer 9

Estoy encontrando un cierto nivel de éxito con el CSS se describe aquí http://www.quirksmode.org/css/selection.html:

::selection { 
    background-color: transparent; 
} 

Se hizo cargo de la mayor parte de los problemas que estaba teniendo con algunos ThemeRoller ul elementos en una aplicación de AIR (motor WebKit) . Sigue obteniendo un pequeño parche de nada (aproximadamente 15 x 15) que se selecciona, pero la mitad de la página se estaba seleccionando antes.

Answer 10

Para Safari, -khtml-user-select: none, al igual que -moz-user-select de Mozilla (o, en JavaScript, target.style.KhtmlUserSelect="none";).

Answer 11

Lo interesante en Firefox es interesante si elimino la línea de escritura, no funciona. Cualquier persona tiene alguna idea de por qué es necesaria la línea de escritura.

<script type="text/javascript"> 
document.write("."); 
document.body.style.MozUserSelect='none'; 
</script> 

Answer 12

Cualquier método JavaScript o CSS es fácilmente eludidas con Firebug (como el caso de Flickr).

Puede usar el ::selection pseudo-element en CSS para modificar el color de resaltado.

Si las pestañas son enlaces y el dotted rectangle in active state es motivo de preocupación, puede eliminarlo también (considere la posibilidad de uso, por supuesto).

Answer 13

Todas las variaciones CSS correctos son:

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 

Answer 14

"Si su contenido es realmente interesante, entonces es poco lo que puede hacer en última instancia, para protegerlo"

eso es cierto, pero la mayoría de copia, en mi experiencia, no tiene nada que hacer con "en última instancia" o frikis o plagiarios determinados o algo por el estilo. Por lo general, es copia casual por personas desorientadas, e incluso una protección simple y fácilmente derrotada (fácilmente derrotada por gente como nosotros) funciona bastante bien para detenerlos. No saben nada sobre "ver fuente" o cachés o cualquier otra cosa ... diablos, ni siquiera saben qué es un navegador web o si lo están usando.

Answer 15

Hay muchas ocasiones en que al desactivar la capacidad de selección se mejora la experiencia del usuario.

Por ejemplo, permite al usuario copiar un bloque de texto en la página sin copiar el texto de los elementos de la interfaz asociados (que se entremezclan con el texto que se está copiando).

Answer 16

Aquí hay un Sass mixin (scss) para aquellos interesados. Compass/CSS   3 no parece tener una mezcla seleccionada por el usuario.

// @usage use within a rule 
// ex. img {@include user-select(none);} 
// @param assumed valid user-select value 
@mixin user-select($value) 
{ 
    & { 
     -webkit-touch-callout: $value; 
     -webkit-user-select: $value; 
     -khtml-user-select: $value; 
     -moz-user-select: $value; 
     -ms-user-select: $value; 
     user-select: $value; 
    } 
} 

Aunque Compass lo haría de una manera más robusta, es decir, solo agregaría soporte para los proveedores que haya elegido.