Jugando con el portapapeles con javascript

palabras / Facebook / Twitter / Enlace / Comentar

Seguramente en varios sitios de música o artículos haz notado cómo tu portapapeles es modificado para agregar una nota publicitaria promocionando el sitio. Esto es posible gracias a la función oncopy.

Demo

Puedes ver la función de la que te estoy hablando copiando el siguiente texto en azul, ya sea con el atajo del teclado o con clic derecho.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum sagittis sapien eu fringilla. Donec facilisis aliquet ante, eu cursus lacus lobortis quis. Vivamus a elit ac mauris vulputate adipiscing nec nec quam. Suspendisse potenti. Sed non massa metus. Fusce ut quam nisl.

Copiaste y pegaste lo siguiente:

Ahora pega tu portapapeles aquí:

¿Cómo funciona?

Es posible ejecutar una función cuando se detecta el copiado, cortado o pegado en un documento de la siguiente manera:

document.oncopy = funcion;

La función que utilicé la el ejemplo anterior fue la siguiente:

function copied(){
  var body = document.getElementsByTagName('body')[0];
  var copied = window.getSelection();
  var newtext = 'Es posible modificar tu portapapeles.';
  $("span.copied").text('"'+copied+'"');
  var newdiv = document.createElement('div');
  newdiv.style.position='absolute';
  newdiv.style.left='-99999px';
  body.appendChild(newdiv);
  newdiv.innerHTML = newtext;
  copied.selectAllChildren(newdiv);
  window.setTimeout(function() {
   body.removeChild(newdiv);
  },0);
}
document.oncopy = copied;

Solo hay que recordar que es muy molesto meterse con el portapapeles de alguien, ya sea modificandolo o agregandole publicidad o un mensaje de copyright.

Las posibilidades son infinitas: podrías enviar una consulta con Ajax a un contador de "copy" para medir cuantas veces o qué parte del documento se está copiando, o bien, mostrar un mensaje de algún tipo como experiencia de usuario, etc.

Cuentame: ¿Cómo lo usarías tu?


Comentarios

Copyright © 2012-2013 AbarcaRodriguez.com