¿Cómo deshabilitar copiar texto en una página web?
Desarrollo 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;
- Desactivar el clic derecho
- Desactivar la copia al portapapeles
- 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 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 desea, puede 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.
Deja un comentario
0 Comentarios
Cargando comentarios...