Botón para copiar URL en el portapapeles

Hoy veremos una pequeña utilidad JavaScript para conseguir que al pulsar un determinado enlace (o botón), la dirección de la página que se esté visitando pase al portapapeles del lector.

Con esto el visitante del sitio tendrá fácil posteriormente con un simple CTRL+V, pegar esa dirección dónde guste. Esto puede servirle para compartir manualmente la dirección de un post que le haya gustado en redes sociales, pasarlo a un bloc de notas, añadirlo a favoritos, etc.

Tras ver el código básico, aplicaremos en él unas pequeñas modificaciones para conseguir algunos efectos adicionales y para finalizar indicaré cómo disponer el código para añadirlo a la colección de botones sociales ligeros de peso que ya explicamos tiempo atrás.

Código básico

El código básico es una función que añade a la página un nuevo elemento input y lo rellena con el dato de la dirección que capta mediante window.location.href. Posteriormente selecciona ese contenido, lo copia al portapapeles y por último elimina el input creado para que no se vea.

Una vez que tenemos montada esa función que he bautizado como getlink(), lo único que resta es crear un botón que ejecute esa función al hacer clic sobre él.

Todo esto junto sería así, aunque si se va a usar con frecuencia lo mejor sería poner la parte JavaScript en plantilla:

<a class="copi" href="javascript:getlink();">Copiar URL</a>

<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value",window.location.href);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
//]]></script>

Y el resultado sería este. Si pincháis en ese enlace y luego pegáis en cualquier sitio, os aparecerá la dirección de esta entrada.

Copiar URL


Lo de añadirle una clase (en el ejemplo copi), no es obligatorio, pero si conveniente si luego queremos que ese enlace simple se transforme en un botón añadiéndole CSS.

.copi {
display: block;
width: 120px;
margin: 0 auto;
padding: 10px;
color: #ffffff;
background: #990000;
text-align: center;
}

Copiar URL

Un paso más. Eliminar algunos elementos de la dirección

La estructura de una URL es la siguiente:

[protocolo]://[dominio].[subdominio]/[ruta]/[recurso]?[cadena de búsqueda]#[hash]

http://www.oloblogger.com/2010/02/generar-y-recuperar-cookies.html?m=1#c19290

Como veis, en ella pueden aparecer algunos parámetros que modifican en algo el destino o incluso apuntan a una parte concreta del documento. Para el caso de que no nos interese que esos parámetros se compartan habría que añadir unos split (resaltados) para recortar del dato capturado (URL completa) precisamente la cadena de búsqueda y el hash (en ese mismo orden en el ejemplo).

<a class="copi" href="javascript:getlink();">Copiar URL</a>

<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value",window.location.href.split('?')[0].split('#')[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
}
//]]></script>

Confirmar al usuario que ya tiene el enlace en su portapapeles

Para hacer más amigable el asunto y sobre todo, para que el usuario sepa que la información se ha transferido a su portapapeles ¿qué tal si añadimos un mensaje?

La manera más sencilla es añadir un alert que nos genere una ventana emergente. Lo pondríamos al final del todo añadiendo un mensaje de texto y la dirección que efectivamente se ha copiado:

<a class="copi" href="javascript:getlink();">Copiar y avisar</a>

<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
alert("URL copiada al portapapeles\n\n" + window.location.href.split("?")[0].split("#")[0]);
}
//]]></script>

Copiar y avisar

Toque final. Mensaje personalizado que desaparece pasado un tiempo

Esto ya va de hacer las cosas más monas. Lo anterior hace su función perfectamente pero las ventanas de JavaScript siempre recuerdan a los puñeteros pop-up no deseados, así que veamos como hacer una a nuestro estilo y que además desaparece sola automáticamente tras mostrarse lo suficiente.

Con respecto al anterior código evidentemente eliminamos la línea antes añadida que contiene el alert. De nuevo resalto lo que se ha añadido para este nuevo fin, que no es mas que instrucciones para crear un nuevo nodo con el CSS del mensaje y otro con el aviso propiamente dicho. La última línea sirve para que desaparezca pasados 2000 milisegundos, o sea, 2 segundos.

<a href='javascript:getlink();'>Copiar URL</a>

<script>//<![CDATA[
function getlink() {
var aux = document.createElement("input");
aux.setAttribute("value", window.location.href.split("?")[0].split("#")[0]);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
var css = document.createElement("style");
var estilo = document.createTextNode("#aviso {position:fixed; z-index: 9999999; widht: 120px; top:30%;left:50%;margin-left: -60px;padding: 20px; background: gold;border-radius: 8px;font-size: 14px;font-family: sans-serif;}");
css.appendChild(estilo);
document.head.appendChild(css);
var aviso = document.createElement("div");
aviso.setAttribute("id", "aviso");
var contenido = document.createTextNode("URL copiada");
aviso.appendChild(contenido);
document.body.appendChild(aviso);
window.load = setTimeout("document.body.removeChild(aviso)", 2000);
}
//]]></script>

Copiar, avisar y desaparecer

Opción: Todo el código en el propio botón

Para terminar, si queréis añadir este botón a los de la colección de botones sociales ligeros sin necesidad de poner JavaScript aparte, sino todo dentro del enlace del botón tal y como hacíamos con los otros, esto será lo que tendréis que utilizar... exclusivamente.

Con aviso básico (alert)

<!-- Copiar -->
<div class='copi'>
<a href='javascript:void();' onclick='var a=document.createElement(&quot;input&quot;);a.setAttribute(&quot;value&quot;,window.location.href.split(&quot;?&quot;)[0].split(&quot;#&quot;)[0]),document.body.appendChild(a),a.select(),document.execCommand(&quot;copy&quot;),document.body.removeChild(a);alert(&quot;URL copiada&quot;);'>Copy URL</a>
</div>

Con aviso que desaparece automáticamente

<!-- Copiar -->
<div class='copi'>
<a href='javascript:void();' onclick='var a=document.createElement(&quot;input&quot;);a.setAttribute(&quot;value&quot;,window.location.href.split(&quot;?&quot;)[0].split(&quot;#&quot;)[0]),document.body.appendChild(a),a.select(),document.execCommand(&quot;copy&quot;),document.body.removeChild(a);var c=document.createElement(&quot;style&quot;),e=document.createTextNode(&quot;#av{position:fixed;z-index:999999;width:120px;top:30%;left:50%;margin-left:-60px;padding:20px;background:gold;border-radius:8px;font-size: 14px;font-family:sans-serif;text-align:center;}&quot;);c.appendChild(e),document.head.appendChild(c);var av=document.createElement(&quot;div&quot;);av.setAttribute(&quot;id&quot;,&quot;av&quot;);var c=document.createTextNode(&quot;URL copiada&quot;);av.appendChild(c),document.body.appendChild(av),window.load=setTimeout(&quot;document.body.removeChild(av)&quot;,2e3);'>Copy URL</a>
</div>

Para practicar podéis utilizar este CodePen.

Jorge MG llama mi atención sobre lo inútil del código para algunos navegadores, como por ejemplo Firefox. Bueno, el lo dice más educadamente pero lo cierto es que no sirve para todos los casos.

Con su sugerencia he retocado el código y definitivamente este sería el que habría que usar en lugar del que está bajo el título "Toque final...".

Nótese que el botón-enlace ya no tiene ninguna instrucción JavaScript y será un addEventListener, asociado a un clic sobre el botón (mouseup) el que detectará si se ha pinchado y lanzará la rutina. Esta forma de ordenar el comienzo es la que permite que el resto del código funcione en Firefox y otros.

Además ahora el 'copy' se ejecuta dentro de un try, para así detectar la eventualidad de que el sistema no funcione en el navegador y avise de ello. Lo demás prácticamente lo mismo, pero acortando un poco la inclusión de CSS para el aviso.

<a class='copi' id='getlink' href='javascript:void();'>Copiar URL</a>

<script>//<![CDATA[
var boton = document.getElementById('getlink');
boton.addEventListener('click', function(e) {
if(boton.id == 'getlink'){
var aux = document.createElement('input');
aux.setAttribute('value', window.location.href.split('?')[0].split('#')[0]);
document.body.appendChild(aux);
aux.select();
try {
document.execCommand('copy');
var aviso = document.createElement('div');
aviso.setAttribute('id', 'aviso');
aviso.style.cssText = 'position:fixed; z-index: 9999999; top: 50%;left:50%;margin-left: -70px;padding: 20px; background: gold;border-radius: 8px;font-family: sans-serif;';
aviso.innerHTML = 'URL copiada';
document.body.appendChild(aviso);
document.load = setTimeout('document.body.removeChild(aviso)', 2000);
document.load = setTimeout('boton.id = "getlink"',2500);
boton.id = '';
} catch (e) {
alert('Tu navegador no soporta la función de copiar');
}
document.body.removeChild(aux);
}
});
//]]></script>

Y ahora sí, podéis probar incluso desde Firefox y funcionará bien el botón.

Copiar, avisar y desvanecer
Crossbrowser

Para "todo el código dentro del propio botón", ahora sería exactamente igual que el anterior. Si acaso eliminando los espacios y saltos de línea que no son necesarios para que ocupe menos.

El nuevo Codepen es http://codepen.io/oloman/pen/WGkrWp

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter