tablas - html bloquear seleccionar texto
Cómo hacer que el texto HTML no se pueda seleccionar (4)
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo deshabilitar resaltar la selección de texto? 37 respuestas
Me gustaría agregar texto a mi página web como una etiqueta y hacer que no se pueda seleccionar.
En otras palabras, cuando el cursor del mouse está sobre el texto, me gustaría que no se convierta en un cursor de selección de texto.
Un buen ejemplo de lo que estoy tratando de lograr son los botones en este sitio web (Preguntas, Etiquetas, Usuarios, ...)
La solución completa y moderna a su problema está basada exclusivamente 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.
Entonces, 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 también cambiará a un símbolo de intercalación cuando se encuentre sobre el texto del elemento, por lo que se agrega a eso:
cursor: default;
El CSS moderno es bastante elegante.
Modifiqué el plugin jQuery publicado anteriormente para que funcione en elementos activos.
(function ($) {
$.fn.disableSelection = function () {
return this.each(function () {
if (typeof this.onselectstart != ''undefined'') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != ''undefined'') {
this.style.MozUserSelect = ''none'';
} else {
this.onmousedown = function() { return false; };
}
});
};
})(jQuery);
Entonces podrías hacer algo así como:
$(document).ready(function() {
$(''label'').disableSelection();
// Or to make everything unselectable
$(''*'').disableSelection();
});
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;
No se puede hacer esto con HTML simple, así que JSF no puede hacer mucho por usted aquí también.
Si se dirige solo a navegadores decentes , solo use 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;
}
<label class="unselectable">Unselectable label</label>
Si también desea cubrir exploradores más antiguos, considere este respaldo de JavaScript:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734</title>
<script>
window.onload = function() {
var labels = document.getElementsByTagName(''label'');
for (var i = 0; i < labels.length; i++) {
disableSelection(labels[i]);
}
};
function disableSelection(element) {
if (typeof element.onselectstart != ''undefined'') {
element.onselectstart = function() { return false; };
} else if (typeof element.style.MozUserSelect != ''undefined'') {
element.style.MozUserSelect = ''none'';
} else {
element.onmousedown = function() { return false; };
}
}
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
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:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != ''undefined'') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != ''undefined'') {
this.style.MozUserSelect = ''none'';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
$(''label'').disableSelection();
});
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>