Saltar al contenido

Cómo hacer que el texto HTML no se pueda seleccionar

Verificamos de forma completamente cada posts en nuestro espacio con el objetivo de enseñarte en todo momento información con la mayor veracidad y certera.

No puede hacer esto con HTML normal y corriente, por lo que JSF tampoco puede hacer mucho por usted aquí.

Si solo se dirige a navegadores decentes, utilice CSS3:

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


Si también desea cubrir los navegadores más antiguos, considere este respaldo de JavaScript:



    
        SO question 2310734
        
    
    
        
    

Si ya está usando jQuery, aquí hay otro ejemplo que agrega una nueva función disableSelection() a jQuery para que pueda usarlo en cualquier parte de su código jQuery:



    
        SO question 2310734 with jQuery
        
        
    
    
        
    

Nadie aquí publicó una respuesta con todas las variaciones correctas de CSS, así que aquí está:

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

La solución moderna completa a su problema se basa puramente en CSS, pero tenga en cuenta que los navegadores más antiguos no lo admitirán, en cuyo caso deberá recurrir a soluciones como las que otros han proporcionado.

Así que en CSS puro:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Sin embargo, el cursor del mouse aún cambiará a un signo de intercalación cuando esté sobre el texto del elemento, por lo que agrega a eso:

cursor: default;

El CSS moderno es bastante elegante.

Comentarios y puntuaciones

Recuerda dar difusión a esta sección si te fue útil.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)


Tags :

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *