Copiar textos a clipboard utilizando Javascript

En este mini tutorial de la Academia vamos a aprender a hacer la funcionalidad de copiar contenido a clipboard para después poder pegarlo en donde nosotros necesitemos o queramos.

HTML

Primero vamos a tener nuestro contenido HTML que realmente solo será un input donde podremos escribir, y que será precisamente el contenido que podremos copiar y pegar en cualquier otro lado, después un botón que ejecutará nuestra funcionalidad de copiado al darle clic y por último un contenedor div que usaremos para mostrar al usuario tanto el texto copiado como feedback y mensajes de error en caso de ser necesario.

<!-- Nuestro input que contendrá el texto a copiar -->
<input type="text" id="input" value="¡Hola vaquero!">

<!-- Nuestro botón que ejecutará la función de javascript -->
<button id="button">Copiar</button>

<!-- Mostraremos aquí notificaciones o el texto copiado -->
<div id="wrapper" class="hidden"></div>

Ya tenemos básicamente todo lo necesario de html, ahora vamos a crear un poco de estilos usando SASS que se compilará a CSS de forma automática posteriormente con la opción que tú prefieras.

CSS

Los estilos que vamos a estar aplicando simplemente son estéticos y no harán ninguna función adicional y son para aplicarlos al wrapper que será el contendedor general de notificaciones o para mostrar el texto o errores, también tendremos dos clases para ocultar o mostrar el contenedor, y dos clases para el color de fondo, una success en caso de que todo salga bien y danger en caso de que sea un error.

#wrapper
  padding: 10px
  margin-top: 10px
  border-radius: 5px
  color: white

.success
  background: #2ecc71

.danger
  background: #e74c3c
  
.hidden
  display: none
  
.display
  display: block

Javascript

Ya con los estilos listos y el html, ahora si vamos a lo principal que es nuestra funcionalidad con Javascript, será muy sencilla, utilizaremos vanilla javascript para todo y realmente lo más importante es hacer uso del objeto navigator que tenemos a nuestra disposición, este nos dará dentro de sus propiedades y métodos la opción de ingresar al clipboard y colocar contenido en él.

Vamos a crear una función llamada copiar_texto() que se activará justo al presionar nuestro botón, pero validaremos si hay contenido en el input, si no hay contenido mostraremos un error en el wrapper, pero si hay contenido, copiaremos al clipboard el contenido del input y también lo mostraremos en el div o contendedor wrapper.

function copiar_texto() {
  // Seleccionar el input de texto y el wrapper
  var input = document.getElementById("input"),
    wrapper = document.getElementById('wrapper');

  // Limpiar cualquiera que sea el valor anterior del wrapper
  wrapper.innerHTML = '';
  wrapper.classList = 'hidden';

  if (input.value.length < 1) {
    wrapper.innerHTML = 'Ingresa un valor válido para copiar.';
    wrapper.classList = 'danger display';
    return;
  }

  // Seleccionamos el input sin necesidad de hacer contacto
  input.select();
  input.setSelectionRange(0, 99999);

  // Usamos el navigator para acceder al clipboard y escribir el valor del input en él
  navigator.clipboard.writeText(input.value);

  // Informamos que hemos copiado el texto
  wrapper.innerHTML = '<b>Texto copiado:</b> ' + input.value;
  wrapper.classList = 'display success';
}

Y por último solo necesitamos el event handler, hacer que cuando el usuario de clic en el botón, se ejecute la función, esto lo logramos de una forma muy sencilla con Javascript, seleccionamos primero el botón que evidentemente será el objeto que necesitamos y después solo definimos que al hacer clic se ejecute la función que creamos.

document.getElementById("button").addEventListener("click", copiar_texto);

Y con eso, tenemos nuestra funcionalidad lista, podemos hacer tan robusto el sistema como queramos, solo es cuestión de ponernos creativos, el límite será nuestra imaginación en realidad.

Aquí puedes checar el fiddle para que tengas todo funcionando de una:

https://jsfiddle.net/Moxtrip/uodq29k8/7/

Recuerda seguirnos y compartir esta publicación para que podamos continuar creando más contenido similar, gracias por su apoyo!