Java Script

Copiar un texto al portapapeles en Java Script

Java Script nos permite agregar múltiples funcionalidades a nuestras páginas web para poder hacerlas más dinámicas y en consecuencias más llamativas para los usuarios. En este tutorial aprenderemos a copiar un texto al portapapeles en Java Script.

Cómo copiar un texto al portapapeles en Java Script

Para poder realizar esta tarea vamos a crear un campo de texto utilizando la etiqueta textarea, y un botón, que al presionarlo vamos a ejecutar la función copiarAPortapapeles que copiará el texto del textarea al portapapeles.

<!DOCTYPE html>
<html>
  <head>
    <title>Copiar un texto al portapapeles en Java Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <body>
    <textarea id="textarea" rows="6" cols="40">Texto que queremos copiar al portapapeles!
    </textarea><br/>
    <button id="copyBlock">Click para copiar</button> <span id="copyAnswer"></span>
  </body>
  <script language="JavaScript">
    // Establecemos las variables
    var textarea = document.getElementById("textarea");
    var answer = document.getElementById("copyAnswer");
    var copy   = document.getElementById("copyBlock");
    copy.addEventListener('click', function(e) {
       // Sleccionando el texto
       textarea.select(); 
       try {
           // Copiando el texto seleccionado
           var successful = document.execCommand('copy');
    
           if(successful) answer.innerHTML = 'Copiado!';
           else answer.innerHTML = 'Incapaz de copiar!';
       } catch (err) {
           answer.innerHTML = 'Browser no soportado!';
       }
    });
  </script>
</html>

Del código anterior lo más importante que podemos destacar son las funciones textarea.select() (la cual se encarga de seleccionar el texto ingresado por el usuario) y document.execCommand(‘copy’) (simplemente copia el texto seleccionado al portapapeles).
Lo interesante del código anterior es que es soportado por la mayoria de los navegadores modernos, incluyendo el Internet Explorer.

Bueno gente, hemos llegado al final de este breve tutorial en el cual explicamos cómo copiar un texto al portapapeles en Java Script, espero que les sea de gran utilidad y ante cualquier inconveniente no duden en enviar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

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