¿Cómo desactivo la selección de texto con CSS o JavaScript?

Question

Duplicar posible:
CSS rule to disable text selection highlighting

estoy haciendo un/CSS/Galería jQuery HTML, con varias páginas.

De hecho, tengo un botón "siguiente", que es un enlace simple con un oyente clic de jQuery.

El problema es que si el usuario hace clic en el botón varias veces, se selecciona el texto del botón y luego la línea de texto completa. En mi diseño realmente oscuro, eso es realmente feo y sin sentido.

Así que aquí está mi pregunta: ¿Se puede deshabilitar la selección de texto en HTML? Si no es así, me quedo extraño terriblemente a flash y su alto nivel de configuración en campos de texto ...

Answer 1

<div 
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
unselectable="on" 
onselectstart="return false;" 
onmousedown="return false;"> 
    Blabla 
</div> 

Answer 2

No estoy seguro de si se puede apagarlo, pero usted puede cambiar los colores de ella :)

myDiv::selection, 
myDiv::-moz-selection, 
myDiv::-webkit-selection { 
    background:#000; 
    color:#fff; 
} 

a continuación, sólo que coincida con los colores de su diseño "negrito" y ver lo que sucede :)

Answer 3

puede usar JavaScript para hacer lo que quiera:

if (document.addEventListener !== undefined) { 
    // Not IE 
    document.addEventListener('click', checkSelection, false); 
} else { 
    // IE 
    document.attachEvent('onclick', checkSelection); 
} 

function checkSelection() { 
    var sel = {}; 
    if (window.getSelection) { 
     // Mozilla 
     sel = window.getSelection(); 
    } else if (document.selection) { 
     // IE 
     sel = document.selection.createRange(); 
    } 

    // Mozilla 
    if (sel.rangeCount) { 
     sel.removeAllRanges(); 
     return; 
    } 

    // IE 
    if (sel.text > '') { 
     document.selection.empty(); 
     return; 
    } 
} 

Caja de jabón: Realmente no debería estar jodiendo con el agente de usuario del cliente de esta manera. Si el cliente desea seleccionar elementos en el documento, entonces debería poder seleccionar elementos en el documento. No importa si no le gusta el color de resaltado, porque usted no es el que mira el documento.

Answer 4

Pruebe este código CSS para compatibilidad entre navegadores.

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

Answer 5

actualización de enero de 2017:

Según Can I use, la user-select está soportado actualmente en todos los navegadores excepto Internet   Explorer 9 y versiones anteriores (pero lamentablemente todavía necesita un prefijo de proveedor).

---

todas las variaciones CSS correctos son:

.noselect { 
 
    -webkit-touch-callout: none; /* iOS Safari */ 
 
    -webkit-user-select: none; /* Safari */ 
 
    -khtml-user-select: none; /* Konqueror HTML */ 
 
     -moz-user-select: none; /* Firefox */ 
 
     -ms-user-select: none; /* Internet Explorer/Edge */ 
 
      user-select: none; /* Non-prefixed version, currently 
 
            supported by Chrome and Opera */ 
 
}

<p> 
 
    Selectable text. 
 
</p> 
 
<p class="noselect"> 
 
    Unselectable text. 
 
</p>

---

Nota que es un no estándar característica (es decir, no una parte de cualquier especificación) . No se garantiza que funcione en todas partes, y puede haber diferencias en la implementación entre navegadores y en el futuro los navegadores pueden dejar de brindar soporte.

---

Más información se puede encontrar en Mozilla Developer Network documentation.