¿Cómo desactivo la selección de texto con CSS o JavaScript? [duplicar]
Estoy haciendo una galería HTML/CSS/jQuery, con varias páginas.
De hecho, tengo un botón "siguiente", que es un enlace simple con un detector de clics 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 desactivar la selección de texto en HTML? Si no, extrañaré muchísimo el flash y su alto nivel de configuración en campos de texto...
<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>
ACTUALIZACIÓN enero de 2017:
Según Can I use , user-selectactualmente es compatible con todos los navegadores excepto Internet Explorer 9 y versiones anteriores (pero lamentablemente todavía necesita un prefijo de proveedor).
Todas las variaciones correctas de CSS 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>Tenga en cuenta que es una característica no estándar (es decir, no forma parte de ninguna especificación). No se garantiza que funcione en todas partes y puede haber diferencias en la implementación entre los navegadores y, en el futuro, los navegadores pueden dejar de admitirlo.
Puede encontrar más información en la documentación de Mozilla Developer Network .
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;
Puedes usar JavaScript para hacer lo que quieras:
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ías jugar con el agente de usuario del cliente de esta manera. Si el cliente quiere seleccionar cosas en el documento, entonces debería poder seleccionar cosas en el documento. No importa si no te gusta el color de resaltado, porque no eres tú quien ve el documento.
