En esta página:
Demo Github
jQuery es una librería genial que nos permite realizar muchas tareas y si la usamos con otras librerías o herramientas, se logran grandes cosas, esto es porque esta creado sobre JavaScript, entre las tareas que podemos realizar está la de deshabilitar la función para copiar y usar el botón derecho del mouse, en este Post te enseñare como hacer estas 2 tareas.
Antes de continuar te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):
| Spotify: | Sound Cloud: |
 |
 |
Bien ahora continuemos con el Post: Como deshabilitar la función Copiar y el botón derecho del Mouse con jQuery 3.4.1
El proceso para realizar esto es muy simple, jQuery nos facilita muchas cosas, si lo hacemos con JavaScript nos puede tomar más líneas de código, bueno eso depende de cada Desarrollador.
Primero le indico al navegador que cuando el documento este listo, ejecute el código jQuery.
|
1 2 3 4 5 6 7 |
$(document).ready(function() { // Acá va el código jQuery }); |
Deshabilitar la función Copiar
Lo primero que haré es deshabilitar la función copiar en el navegador, para mi ejemplo voy a usar un párrafo con nombre de clase texto
|
1 2 3 4 5 6 7 8 9 10 |
<p class="texto"> Donec ornare velit eu odio tempor, eget lobortis elit condimentum. Curabitur dictum mattis felis, vitae condimentum libero pellentesque tempus. Suspendisse faucibus sem leo, eget commodo turpis fermentum vel. Donec non ipsum mollis, faucibus sapien sed, lobortis elit. Mauris vehicula interdum nibh eget mattis. Integer accumsan gravida justo. Nunc sapien magna, ultricies fringilla tristique ut, dictum tempus libero. Nullam orci quam, tempus in orci id, pretium elementum massa. Pellentesque aliquam nulla aliquet sem vestibulum, vel auctor erat hendrerit. </p> |
Cuando el usuario intente copiar este texto o parte de el, pues le muestro un mensaje en un div con nombre de clase mensaje.
En mi código jQuery uso del método on() para definir el evento de copiar y luego uso el método html() para mostrar un mensaje No se Puede copiar el contenido !
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function() { // Deshabilito la función copiar $('.texto').on("copy", function(e) { // Muestro un mensaje que no se puede copiar el contenido $(".mensaje").html('<div class="alert alert-danger">No se Puede copiar el contenido !</div>'); e.preventDefault(); }); }); |
Si selecciono el texto y presiono las teclas CTRL + C para copiarlo, me aparece el mensaje No se Puede copiar el contenido !
Tu puedes implementar esta funcionalidad según tus necesidades, yo lo hice de esta forma para este tutorial.
Deshabilitar el botón derecho del Mouse
Ahora vamos a deshabilitar el botón derecho del mouse para darle más seguridad al contenido, usaré el mismo párrafo.
|
1 2 3 4 5 6 7 8 9 10 |
<p class="texto"> Donec ornare velit eu odio tempor, eget lobortis elit condimentum. Curabitur dictum mattis felis, vitae condimentum libero pellentesque tempus. Suspendisse faucibus sem leo, eget commodo turpis fermentum vel. Donec non ipsum mollis, faucibus sapien sed, lobortis elit. Mauris vehicula interdum nibh eget mattis. Integer accumsan gravida justo. Nunc sapien magna, ultricies fringilla tristique ut, dictum tempus libero. Nullam orci quam, tempus in orci id, pretium elementum massa. Pellentesque aliquam nulla aliquet sem vestibulum, vel auctor erat hendrerit. </p> |
Mediante el método mousedown() le indico al navegador que cuando el usuario presione el botón derecho del mouse, este se deshabilite. Luego mediante if verifico que si el usuario presiona el segundo botón del mouse, en este caso es el 2, pues le lanzo una alerta con el mensaje El botón derecho del Mouse esta Deshabilitado !
|
1 2 3 4 5 6 7 8 9 10 11 |
// Deshabilito el botón derecho del mouse $('.texto').mousedown(function(e) { // Selecciono el segundo botón (derecho) del mouse '2' if (e.button == 2) { e.preventDefault(); alert('El botón derecho del Mouse esta Deshabilitado !'); } }); |
Estoy usando una alert() porque restringe cualquier acción en la ventana del navegador, e impide que el usuario realice alguna tarea en el. Entonces si presiono el botón derecho del mouse, pues le lanzo una alerta con el mensaje El botón derecho del Mouse esta Deshabilitado !
Igualmente que la funcionalidad anterior, esta funcionalidad para deshabilitar el botón derecho del mouse tu la puedes implementar según tus necesidades.
Bueno mi código completo jQuery se vería así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(document).ready(function() { // Deshabilito la función copiar $('.texto').on("copy", function(e) { // Muestro un mensaje que no se puede copiar el contenido $(".mensaje").html('<div class="alert alert-danger">No se Puede copiar el contenido !</div>'); e.preventDefault(); }); // Deshabilito el botón derecho del mouse $('.texto').mousedown(function(e) { // Selecciono el segundo botón (derecho) del mouse '2' if (e.button == 2) { e.preventDefault(); alert('El botón derecho del Mouse esta Deshabilitado !'); } }); }); |
Al inicio de este Post, puedes ver una Demo y un enlace al repositorio GitHub con el código de este tutorial.
Conclusión
Si necesitas proteger tu sitio web puedes implementar estas 2 funcionalidades, aunque no es muy usado en sitios webs en la actualidad, hay situaciones en las que si pueden ser necesarias su implementación.
Nota
- Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a jQuery y JavaScript.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.