Evitar cortar, copiar y pegar usando jQuery

Hay ocasiones en que por requerimiento de algún cliente necesitamos ir en contra del comportamiento nativo de los navegadores web, el caso más común es impedir la posibilidad de cortar, copiar y pegar texto o muchas veces eliminar el menú contextual al hacer clic derecho (precisamente para evitar las acciones ya mencionadas). Para muchos esto puede ser un dolor de cabeza ya que la forma usual de hacerlo es controlando los eventos y las teclas presionadas, lo cual se maneja distinto en Internet Explorer que en el resto de los navegadores.

La solución que he probado es muy sencilla, limpia y compatible con todos los navegadores actuales. Lo mejor del caso es que usamos jQuery.

Lo primero que debes hacer es incluir la librería de jQuery de forma local o remota, para esto basta con el siguiente código:

<script src="/directorio/jquery.min.js"></script>

Donde vamos a controlar el comportamiento es en la carga del documento, de forma tal que pueda aplicarse a todos los elementos de nuestra página, a un grupo de elementos o un elemento en específico. El siguiente ejemplo está hecho para evitar dichos comportamientos en toda nuestra aplicación:

<script>
  $(document).ready(function(){
    $('*').bind("cut copy paste",function(e) {
      e.preventDefault();
    });
  });
</script>

Con el selector $(‘*’) estoy seleccionando todos los elementos, si quisieran aplicarlo solo a las cajas de texto, entonces lo cambian por $(‘:input’); si quisieran aplicarlo a un elemento específico, entonces deben poner el nombre del elemento precedido por un comodín de la siguiente forma $(‘#nombre_elemento’).

El método bind controla en este caso las acciones cut copy paste, podemos quitar las que no nos interesen controlar. El método preventDefault() precisamente evita el funcionamiento por defecto de una acción, si quisiéramos mostrar un mensaje de alerta dónde se le indique al usuario que no puede realizar la acción, entonces luego de dicha línea agregamos un alert():

alert('Lo sentimos, pero no puede realizar dicha acción, por motivos de seguridad la hemos bloqueado.');

Hasta aquí todo funciona bien, pero hay algo que no podemos dejar escapar y es que todavía los usuarios pueden seleccionar el texto y arrastrarlo fuera del navegador y pegarlo en un bloc de notas, para eso hay otra técnica poco conocida. Necesitamos agregar dos propiedades especiales a la etiqueta body, de forma tal que quede de la siguiente manera:

<body onselectstart="return false;" ondragstart="return false;">

A partir de este momento si el usuario desea copiar algo de nuestra página tendrá que ir directamente al código fuente o descargarla, cosas que ya deben ser bloqueadas a nivel del cliente y no en nuestra aplicación.

Espero que este simple tutorial les sirva de gran ayuda para algo tan sencillo que suele complicarnos mucho nuestro trabajo.