Botón copiar texto en html hacia el portapapeles

 

Para crear la opción de copiar texto en html ya sea un código, pin, etc se debe crear el siguiente javascript:

<script>

    function copy() {

      const el = document.createElement('textarea');

      el.value = document.getElementById("pin_text").innerHTML.split(":")[1].trim();

      el.setAttribute('readonly', '');

      el.style.position = 'absolute';

      el.style.left = '-9999px';

      document.body.appendChild(el);

      el.select();

      document.execCommand('copy');

      document.body.removeChild(el);

    }

  </script>

El html debería tener algo como esto:

<h2 id="pin_text">Sigue disfrutando tu servicio. Este es tu PIN/CUPON de acceso: 1234ABCD</h2>

<a style="text-decoration: underline;" href="javascript:copy();">COPIAR PIN</a>

La función javascript "copy" en este caso separaría el texto encontrado en id="pin_text" y lo separaría por el caracter ":" y el dato que encuentre, en este caso "1234ABCD" se copiaria en el portapapeles.