Copiar al portapeles : Javascript

Copiar al portapeles : Javascript

Copiar al portapeles : Javascript
Valora el contenido

Hoy paso de rápido para traerles una funcionalidad bastante utilizada pero que no hay mucha información de como implementarla, copiar al portapeles! así es, hoy les traigo un ejemplo de como realizar la función de copy to clipboard que poco se desarrolla por obvias razones pero que en algunos proyectos web es requerida con deseo por parte de nuestros usuarios perezosos 😛

En nuestra busqueda de hacer mas facil el camino a nuestros usuarios ( mira como subir archivos arrastrando y soltando ) hoy vámos a implementar esta funcionalidad mediante una libreria que esta bastante bien después de utilizarla un poco, hablamos de clipboard.js.

Esta libreria es bastante fácil de utilizar, es rápida y simple!

Para utilizarla únicamente necesitamos el js minificado y lo mandamos llamar

después lo inicializamos con el componente que será el lanzador de la acción, en este caso cualquier botón

ahora crearémos este botón que al presionar copiará un texto de un elemento textarea

por cierto el elemento textarea tiene un id “frase”, es como sigue

y es todo.


Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

Podemos notar que el botón lanzador tiene el atributo data-clipboard-action establecido a la propiedad copy, esta propiedad también puede ser cut la cual cortará el texto eliminandolo del elemento textarea.

También cuenta con la propiedad data-clipboard-target que indica sobre cual elemento obtendrá el texto.

copiar al portapapeles con javascript

Ver demo

Por último cuenta con eventos para realizar otras acciones al cortar o copiar textos.

copiar al portapeles con javascript 2

Después de haber visto como copiar al portapeles con javascript ya podemos implementar esta funcionalidad en nuestros proyectos donde se quiera minimizar aún más el esfuerzo de nuestros usuarios 😀

 

Copiar al portapeles : Javascript
Valora el contenido

Deja tu comentario

Dejar un comentario

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

Loading Facebook Comments ...