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.

Eliminar foco (marca) del objeto una vez se da clic en HTML

 

Para evitar que el foco marque un objeto en HTML se debe utilizar el siguiente css:

    <style>

        *:focus {

            outline: none;

        }

    </style>

Comprimir código HTML con PHP

Para comprimir se coloca el siguiente código PHP al inicio del documento:

ob_start('ob_gzhandler');
ob_gzhandler(ob_start('compress_page'), 5);

function compress_page($buffer) {
    $search = array('/\>[^\S ]+/s', '/[^\S ]+\</s', '/(\s)+/s');
    $replace = array('>', '<', '\\1');
    return preg_replace($search, $replace, $buffer);
}