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

https://stackoverflow.com/questions/69430

09-06-2019
|

Pregunta

Esta pregunta ya tiene respuesta aquí:

¿Cómo deshabilitar el resaltado de selección de texto? 40 respuestas

Estoy creando una interfaz de usuario HTML con algunos elementos de texto, como nombres de 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, lo que la selecciona de forma predeterminada en muchos navegadores.

Quizás pueda 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.

Solución

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á utilizar el unselectable atributo del elemento que desea que no se pueda seleccionar.Puedes configurar esto 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, podrías 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"));

Otros consejos

<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

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;

Prueba esto:

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

Sencillo, pero efectivo...Funciona en las versiones actuales de todos los principales navegadores.

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

Es una "vista previa" de la futura "selección de usuario", como dicen, así que tal vez Ópera o kit webLos navegadores basados en Microsoft lo admitirán.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 falle alguna funcionalidad dinámica, no deberías anular lo que los usuarios esperan de una página web, que es poder seleccionar cualquier texto que deseen.

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

::selection {
    background-color: transparent;
}

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

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

Nota después de pensar un poco más: necesitarías tener estas 'portadas' vinculadas para que al hacer clic en ellas te lleve a donde se suponía que estaba la pestaña, lo que significa que podrías/deberías hacer esto con el elemento de anclaje configurado en display:box, ancho y alto establecidos, así como la imagen de fondo transparente.

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

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

"Si su contenido es realmente interesante, entonces hay poco que pueda 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 geeks o plagiadores decididos ni nada por el estilo.Por lo general, se trata de una copia casual por parte de personas despistadas, e incluso una protección simple y fácil de derrotar (es decir, fácilmente derrotada por personas como nosotros) funciona bastante bien para detenerlos.No saben nada sobre "ver fuente" o cachés ni nada más...Diablos, ni siquiera saben qué es un navegador web o si están usando uno.

Aquí está un Hablar con descaro a mixin (scss) para aquellos interesados. Brújula/CSS 3 no parece tener un mixin seleccionado 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 agregue soporte para los proveedores que haya elegido.

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

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

Puedes usar el ::selection pseudoelemento en CSS para alterar el color de resaltado.

Si las pestañas son enlaces y el rectángulo punteado en estado activo es preocupante, también puedes eliminarlo (considera la usabilidad, por supuesto).

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

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

También se pueden seleccionar imágenes.

Existen límites al uso de JavaScript para anular la selección de texto, ya que puede suceder incluso en lugares donde desea seleccionar.Para garantizar una carrera rica y exitosa, manténgase alejado de todos los requisitos que requieren capacidad para influir o administrar el navegador más allá de lo común...a menos, por supuesto, que te paguen muy bien.

Curiosamente, lo siguiente funciona 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>

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow