web-development-kb-es.site

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

Estoy creando una interfaz de usuario 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 (también me gustaría ver esas respuestas), pero realmente espero que haya algo en CSS/HTML directamente que funcione en todos los navegadores.

javascripthtmlcsscross-browsertextselection
132
Tyler

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 <10 y Opera, deberá usar el atributo unselectable del elemento que desea que no se pueda seleccionar. Puedes configurarlo usando un atributo en HTML:

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

Lamentablemente, esta propiedad no se hereda, lo que significa que debe colocar un atributo en la etiqueta de inicio de cada elemento dentro del <div>. Si esto es un problema, en su lugar, podría usar JavaScript para hacer esto recursivamente 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"));
184
Tim Down
<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

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

41
dimarzionist

Todas las variaciones correctas de CSS son:

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

Prueba esto:

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

Simple, pero efectivo ... funciona en versiones actuales de todos los principales navegadores.

13
Stephen M. Redd

Para Firefox, puede aplicar la declaración CSS "-moz-user-select" a "none". Revise su documentación,SELECCIÓN DE USUARIO.

Es una "vista previa" del futuro "selección de usuario" como dicen, por lo que tal vez Opera o WebKit navegadores basados ​​en _ _ sean compatibles con eso. 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 en la que la selección de texto haga que algunas funciones dinámicas falle, no deberías anular lo que los usuarios esperan de una página web, y eso es poder seleccionar el texto que desee.

11
Jorge Alves

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

::selection {
    background-color: transparent;
}

Se encargó de la mayoría de los problemas que tenía con algunos elementos ThemeRoller ul en una aplicación de AIR (motor de WebKit). Sigue obteniendo un pequeño parche de nada (aprox. 15 x 15) que se selecciona, pero antes se seleccionaba la mitad de la página.

8
jlleblanc

Ubique absolutamente las divs sobre el área de texto con un índice z más alto y otorgue a estas divs un gráfico transparente GIF background.

Tenga en cuenta después de reflexionar un poco más: tendría que tener estas 'cubiertas' vinculadas, de modo que hacer clic en ellas lo llevaría al lugar donde debía estar la pestaña, lo que significa que podría/debería hacer esto con el elemento delimitador configurado en display:box, conjunto de anchura y altura, así como la imagen de fondo transparente.

6
Dave Rutledge

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

4
Alan Hensel

Para ver un ejemplo de por qué podría ser conveniente suprimir la selección, vea SIMILE TImeline , que usa la función de arrastrar y soltar para explorar la línea de tiempo, durante la cual el movimiento vertical accidental del mouse hace que las etiquetas se resalten inesperadamente, lo que parece extraño .

4
pdc

Aquí hay un Sass mixin (scss) para aquellos interesados. Compass / CSS 3 no parece tener una mezcla de selección de 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á soporte para los proveedores que haya elegido.

3
rgb

"Si tu contenido es realmente interesante, entonces hay poco que puedas hacer para protegerlo"

Eso es cierto, pero la mayoría de las copias, en mi experiencia, no tienen nada que ver con "en última instancia" o frikis o determinados plagiarios o algo así. Por lo general, las personas despistadas copian de forma casual, e incluso una protección simple y fácilmente derrotada (es decir, es fácilmente derrotada por personas como nosotros) funciona bastante bien para detenerlos. No saben nada acerca de "ver código fuente" o cachés o cualquier otra cosa ... diablos, ni siquiera saben qué es un navegador web o que están usando uno.

3
Big Bill

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

1
Wedge

Las imágenes pueden ser seleccionadas también.

Hay límites para usar JavaScript para deseleccionar texto, ya que puede ocurrir incluso en lugares donde desea seleccionar. Para garantizar una carrera rica y exitosa, manténgase alejado de todos los requisitos que necesitan capacidad para influir o administrar el navegador más allá de lo normal ... a menos que, por supuesto, le estén pagando extremadamente bien.

1
Kinjal Dixit

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

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

Si las pestañas son enlaces y el rectángulo de puntos en estado activo es una preocupación, puede eliminar eso también (considere la usabilidad, por supuesto).

1
Taylor Edmiston

Hay muchas ocasiones en que desactivar la seleccionabilidad mejora la experiencia del usuario.

Por ejemplo, permitir que el usuario copie un bloque de texto en la página sin copiar el texto de ningún elemento de interfaz asociado con él (que se intercalaría dentro del texto que se está copiando).

1
kbcom

Lo siguiente funciona de manera interesante en Firefox si elimino la línea de escritura, no funciona. Alguien tiene alguna idea de por qué se necesita la línea de escritura.

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