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
¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:
WebEmpresa<script src="clipboard.min.js"></script>
después lo inicializamos con el componente que será el lanzador de la acción, en este caso cualquier botón
var clipboard = new Clipboard('.btn');ahora crearémos este botón que al presionar copiará un texto de un elemento textarea
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#frase"> Copiar frase </button>
por cierto el elemento textarea tiene un id «frase», es como sigue
<textarea id="frase">Podemos aprender sólo si estamos dispuestos a equivocarnos</textarea>
y es todo.
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.
Por último cuenta con eventos para realizar otras acciones al cortar o copiar textos.
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
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 😀