Copiar contenido de DIV Javascript

Hola que tal va todo? Hoy les traigo una función que copia el texto dentro de un div (o cualquier cosa en realidad que sea seleccionable). Como solo se puede copiar desde un input toma el texto lo escribe a un textarea, lo copia y luego elimina el elemento creado:

Antes de ir al código quiza quieras revisar la nueva Clipboard API aquí para lograr lo mismo de manera mas moderna!

 function copiar() {       
  // Crea un input para poder copiar el texto dentro       
  let copyText = document.getElementById('copy').innerText 
  const textArea = document.createElement('textarea');
  textArea.textContent = copyText;
  document.body.append(textArea);       
  textArea.select();       
  document.execCommand("copy");       
  // Delete created Element       
  textArea.remove() 
} 

La ejecución de la función ocurre tan rápido que no se ve el textarea, pero si copias un texto muy largo o en conexiones lentas se verá. para lo cual quizá quieras crear el elemento con CSS personalizado para ocultarlo. Coméntanos tu solución CSS para esto!

Lo he probado con un div seteandole un id=»copy». Ten cuidado que si hay texto dentro de un elemento hijo también lo copia, por ejemplo


<div id="copy"> 
Esto 
<div> Aquello </div>
</div>

Copiaría «Esto Aquello». Así que tenlo en cuenta. Que tengas un gran día!

José Miguel Concha Parra

José Miguel Concha Parra

Deja una respuesta

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