Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como deshabilitar la función Copiar y el botón derecho del Mouse con jQuery 3.4.1

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.

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


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 !


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.


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 !


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í:


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

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Salir de la versión móvil