En el mundo del desarrollo web, hay varias tareas que parecen simples a primera vista, pero pueden volverse un poco complicadas cuando se intenta implementarlas. Hoy, daremos un vistazo más de cerca a uno de estos casos: el de copiar dos textos utilizando Javascript.
Usualmente es posible que necesitemos que nuestra página web permita a los usuarios copiar algún texto al portapapeles. Javascript nos proporciona las herramientas para hacer precisamente eso.
Teoría detrás de la Copia de Textos
Existen diferentes métodos para copiar contenido al portapapeles. Un enfoque común implica la utilización del método execCommand(“copy”) pero este ha sido ya declarado obsoleto en favor del más moderno Clipboard API.
Implementando la Copia de Textos
const botonCopiar = document.querySelector('#botonCopiar');
const copiarContenido1 = document.querySelector('#textArea1');
const copiarContenido2 = document.querySelector('#textArea2');
botonCopiar.addEventListener('click', function(e) {
const copiaTemporal = document.createElement('textarea');
copiaTemporal.value = copiarContenido1.value + 'n' + copiarContenido2.value;
document.body.appendChild(copiaTemporal);
copiaTemporal.select();
document.execCommand('copy');
document.body.removeChild(copiaTemporal);
});
Revisando el Código
En la primera línea, seleccionamos el botón al que hemos asignado el evento de click para copiar. Luego, seleccionamos los dos contenidos que deseamos copiar.
Para llevar a cabo la copia, hacemos uso de un área de texto temporal, en donde consolidamos ambos textos, incluyendo un salto de línea entre ellos. Después, se selecciona y se copia el contenido completo hacia el portapapeles.
Añadiendo un poco de Estilo
El código anterior funciona perfectamente, pero es posible que quieras hacer que el proceso de copia sea un poco más visible para el usuario.
botonCopiar.addEventListener('click', function(e) {
const copiaTemporal = document.createElement('textarea');
copiaTemporal.value = copiarContenido1.value + 'n' + copiarContenido2.value;
document.body.appendChild(copiaTemporal);
copiaTemporal.select();
document.execCommand('copy');
document.body.removeChild(copiaTemporal);
this.textContent = 'Copiado!';
setTimeout(() => this.textContent = 'Copiar', 2000);
});
Con este código adicional, el botón de copia mostrará un mensaje de confirmación ‘Copiado!’ durante dos segundos antes de volver al texto original.
Soluciones Alternativas
Si necesitas copiar un gran volumen de texto o si la solución con execCommand(“copy”) no está disponible, siempre puedes optar por soluciones CSS. Diseñar un largo textarea y copiar todo su contenido puede ser una alternativa viable.
Concluyendo
Como puedes ver, la tarea de copiar dos textos en javascript puede parecer desalentadora al principio. Sin embargo, con la comprensión correcta y el uso de la API de Javascript, puedes lograrlo de manera sencilla y eficaz. Esperamos que este artículo te haya brindado las herramientas que necesitas para realizar esta tarea con éxito en tus futuros proyectos.