Cómo hacer que el texto HTML no sea seleccionable [duplicado]
Me gustaría agregar texto a mi página web como etiqueta y hacerlo no seleccionable.
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 intento lograr son los botones de este sitio web (Preguntas, Etiquetas, Usuarios,...)
No puede hacer esto con HTML simple, por lo que JSF tampoco puede hacer mucho por usted aquí.
Si su objetivo es únicamente 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;
}
<label class="unselectable">Unselectable label</label>
Si también desea cubrir navegadores más antiguos, considere esta alternativa 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ás usando jQuery , aquí tienes otro ejemplo que agrega una nueva función disableSelection()a jQuery para que puedas usarla en cualquier parte de tu 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>
Nadie aquí publicó una respuesta con todas las variaciones correctas de CSS, así que aquí está:
.not-selectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<p class="not-selectable">Not-selectable text</p>
La solución moderna completa a su problema se basa exclusivamente en CSS, pero tenga en cuenta que los navegadores más antiguos no la admiten, 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 seguirá cambiando 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.
