¿Cómo copiar el contenido al portapapeles de un elemento HTML al dar clic en él?

Para que el contenido que tiene un elemento sea copiado automáticamente al portapapeles del usuario, anexo la siguiente función en javascript ayudándome de los selectores de jquery.

Cada paso esta comentado, para en caso de utilizarla con un distinto elemento puedas modificarla sin dificultad.

En el ejemplo realizo la copia del contenido html que existe dentro de un elemento td de una tabla.

HTML


<table>
      <tr>
           <td onclick="Copiar(this)">Hola soy un texto que se copia al darle clic</td>
           <td onclick="Copiar(this)">Hola yo soy otro texto que se copia al darle clic</td>
      </tr>
</table>

JAVASCRIPT


 function Copiar(element) {
        //creamos un input que nos ayudara a guardar el texto temporalmente
        var $temp = $("<input>");
        //lo agregamos a nuestro body
        $("body").append($temp);
        //agregamos en el atributo value del input el contenido html encontrado
        //en el td que se dio click
        //y seleccionamos el input temporal
        $temp.val($(element).html()).select();
        //ejecutamos la funcion de copiado
        document.execCommand("copy");
        //eliminamos el input temporal
        $temp.remove();
    }

 

mm

About

Desarrollador de software, lector compulsivo.

View all posts by

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *