¿Cómo deshabilitar copiar texto en una página web?

En este pequeño tutorial te enseñaré a evitar que los ladrones de contenido se roben tus artículos para usarlos en otros sitios. Aunque son métodos que se pueden evitar por una persona que sepa algo de programación, para la mayoría de los casos puede funcionar.

Para deshabilitar la copia del texto hay 3 cosas que debemos abordar:

1. Desactivar el clic derecho
2. Desactivar la copia al portapapeles
3. Deshabilitar y ocultar la selección del texto con CSS

Vayamos al código para mostrarte cómo deshabilitar el copiado de textos en tu sitio web.

1. Deshabilitar el clic derecho (Menú contextual)

Lo primero que debemos hacer es deshabilitar el uso del menú contextual cuando una persona haga clic derecho en tu página web. Para esto utilizaremos un pequeño código de JavaScript que debes incluir antes del cierre de la etiqueta </body>.

<script type='text/javascript'>
    document.addEventListener("contextmenu", function(event){
        event.preventDefault();
    }, false);
</script>

Todo lo que tenemos que hacer es escuchar el menú contextual addEventListener("contextmenu") y evitar que se abra con event.preventDefault().

2. Desactivar la copia al portapapeles

Este segundo paso creo que es el que más sentido tiene. Incluso después de deshabilitar el menú contextual, las personas aún pueden copiar el contenido utilizando el teclado. La mejor manera de evitarlo es apuntar al evento copy en sí.

document.addEventListener("copy", function(event){
    // Change the copied text if you want
    event.clipboardData.setData("text/plain", "No se permite copiar en esta página web");
    
    // Prevent the default copy action
    event.preventDefault();
}, false);

En este código escuchamos el evento copy.

Si lo deseas, puedes cambiar el texto copiado en el portapapeles con event.clipboardData.setData("text/plain", "MENSAJE").

Y finalmente, evitamos la acción predeterminada de copia con event.preventDefault().

Debes incluir este código dentro de la misma etiqueta <script></script> del anterior código, es decir, todo el código debería quedar así:

<script type='text/javascript'>
    document.addEventListener("contextmenu", function(event){
        event.preventDefault();
    }, false);

    document.addEventListener("copy", function(event){
        // Change the copied text if you want
        event.clipboardData.setData("text/plain", "No se permite copiar en esta página web");
        // Prevent the default copy action
        event.preventDefault();
    }, false);
</script>

3. Por último evitaremos la selección y el resaltado del texto con CSS

Este es una manera de deshabilitar la copia de texto sólo utilizando CSS.

* {
  user-select: none;
}
*::selection {
  background: none;
}
*::-moz-selection {
  background: none;
}

Con user-select: none debería ser suficiente, pero agregaremos *::selection { background: none } para eliminar completamente el color de fondo al seleccionar un texto, lo que hace que sea más difícil saber qué bloque de texto se ha seleccionado o si se ha seleccionado algún texto.

Nota: user-select: none NO funcionará en los navegadores antiguos, así que ten esto en cuenta.