Cómo impedir que el usuario pueda seleccionar el texto de una página HTML

Me gustaría añadir una etiqueta en mi página HTML cuyo texto no se pueda seleccionar. En otras palabras, cuando el usuario pasa el ratón por encima del texto, el puntero del ratón no debería cambiar y el texto no debería poder seleccionarse.

Estás leyendo una traducción autorizada de la pregunta How to make HTML Text unselectable planteada por Ben en StackOverflow.

Respuestas

Con CSS3 podrías aplicar los siguientes estilos para impedir que el usuario pueda seleccionar el texto:

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

El problema es que parece que finalmente la propiedad user-select la van a retirar de las próximas versiones del estándar CSS3. Así que la única alternativa viable y que funciona en todos los navegadores sería hacer uso de JavaScript.

Aquí tienes un ejemplo de este código

<!doctype html>
<html lang="es">
    <head>
        <title>El texto no se puede seleccionar</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>¡Este texto no se puede seleccionar!</label>
    </body>
</html>

Si ya utilizas jQuery en tu sitio web, aquí tienes otro código que define una función llamada disableSelection() y que puedes utilizar en cualquier parte de tu código jQuery:

<!doctype html>
<html lang="es">
    <head>
        <title>El texto no se puede seleccionar</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>¡Este texto no se puede seleccionar!</label>
    </body>
</html>

Estás leyendo una traducción autorizada de la respuesta proporcionada por BalusC en StackOverflow.

@librosweb

18 septiembre 2014, 19:51