{"id":20393,"date":"2024-08-09T13:00:00","date_gmt":"2024-08-09T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=20393"},"modified":"2024-10-17T17:51:57","modified_gmt":"2024-10-17T15:51:57","slug":"como-copiar-al-portapapeles-con-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-copiar-al-portapapeles-con-javascript\/","title":{"rendered":"C\u00f3mo copiar al portapapeles con JavaScript"},"content":{"rendered":"\n

Si te preguntabas c\u00f3mo copiar al portapapeles con JavaScript<\/strong>, esta es tu entrada. A continuaci\u00f3n te explico c\u00f3mo puedes a\u00f1adir un bot\u00f3n para copiar textos de tu web y tambi\u00e9n poder pegarlos.<\/p>\n\n\n\n

Qu\u00e9 es el portapapeles o clipboard<\/h2>\n\n\n\n

El portapapeles es una herramienta que permite almacenar informaci\u00f3n de manera temporal. Puede ser cualquier tipo de dato, im\u00e1genes, texto, archivos… <\/p>\n\n\n\n

La manera que tenemos de pasarle informaci\u00f3n normalmente es copiando o cortando<\/strong>, y la manera de ser extra\u00edda para usarla es pegando<\/strong>.<\/p>\n\n\n\n

En general el portapapeles que usamos por defecto en nuestros ordenadores y en muchos m\u00f3viles, permite guardar un elemento y acceder a ese \u00faltimo, de manera que si copiamos o cortamos otro elemento, no tendremos acceso al anterior. Aunque ese es el comportamiento m\u00e1s corriente, los sistemas operativos (tanto en m\u00f3vil como en PC) ya incorporan herramientas donde puedes ver una lista de las \u00faltimas cosas que se han guardado y seleccionar una de ellas para pegarla.<\/p>\n\n\n\n

C\u00f3mo se accede al portapapeles<\/h2>\n\n\n\n

Lo que muchos usuarios de PC har\u00e1n ser\u00e1 hacer clic derecho y seleccionar alguna de las opciones de Copiar, Cortar o Pegar.<\/strong><\/p>\n\n\n\n

No obstante, hay alg\u00fan comando que al menos en mi opini\u00f3n es m\u00e1s c\u00f3modo y m\u00e1s r\u00e1pido, y son Ctrl + C (copiar), Ctrl + X (cortar) y Ctrl + V (pegar).<\/strong> Para Mac los comando son command+ C (copiar), command+ X (cortar) y command+ V (pegar).<\/p>\n\n\n\n

Windows ahora trae una herramienta a la cual se accede mediante la tecla Windows + V, y permite ver el historial del portapapeles, entre otras cosas:<\/p>\n\n\n

\n
\"vista<\/figure>\n<\/div>\n\n\n

La API del portapapeles o Clipboard API<\/h2>\n\n\n\n

La API del portapapeles permite al navegador acceder al portapapeles del sistema de manera as\u00edncrona. <\/strong>Si bien para que un usuario pueda copiar, a trav\u00e9s de la API del navegador, a su portapapeles, el permiso es concedido simplemente por estar activa la pesta\u00f1a del navegador. No ocurre lo mismo con el permiso para pegar<\/strong> desde el portapapeles, donde se necesita pedir permiso al usuario<\/strong> mediante la API de Permisos.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

C\u00f3mo copiar texto al portapapeles con JavaScript<\/h2>\n\n\n\n

Lo primero que tendr\u00edamos que hacer ser\u00eda seleccionar el texto, podr\u00edamos hacerlo seleccion\u00e1ndolo mediante su ID<\/a>. Para ello primero habr\u00eda que crear el texto:<\/p>\n\n\n\n

<p id=\"textToCopy\">El texto a copiar.<\/p><\/code><\/pre>\n\n\n\n
 Con el texto creado en JavaScript lo seleccionamos y lo guardamos en un variable<\/p>\n\n\n\n
 const copiedText = document.getElementById(\"textToCopy\").value;<\/code><\/pre>\n\n\n\n
Ahora, utilizaremos la interfaz Navigator<\/code> y la Clipboard API<\/code> para copiar el valor del texto que hemos seleccionado. Primero, seleccionamos el texto mediante su ID y luego copiamos ese valor al portapapeles usando el m\u00e9todo writeText<\/code> de la Clipboard API<\/code>. seleccionando copiedText<\/code>:<\/p>\n\n\n\n
navigator.clipboard.writeText(copiedText)<\/code><\/pre>\n\n\n\n
Esto si lo ejecutamos tal cual, por ser la manera en la que accede al portapapeles as\u00edncrona, nos devolver\u00e1 una promesa, as\u00ed que tendremos que utilizar .then<\/code> o async\/await<\/code> para resolverla. Y por supuesto, querremos que el usuario copie el texto cuando este dispare un evento, que t\u00edpicamente ser\u00e1 un clic en alg\u00fan bot\u00f3n que le indique que va a realizar la copia. As\u00ed que todo junto ser\u00eda algo as\u00ed:<\/p>\n\n\n\n
 document.getElementById(\"copyButton\").addEventListener(\"click\", async () => {\n       const copiedText = document.getElementById(\"textToCopy\").value;\n      await navigator.clipboard.writeText(copiedText );\n});<\/code><\/pre>\n\n\n\n
De esta manera habremos guardado en el portapapeles el texto.<\/p>\n\n\n\n
Si quisi\u00e9ramos utilizar un bot\u00f3n de pegar<\/strong> ser\u00eda muy parecido, pero usar\u00edamos navigator.clipboard.readText();<\/code> para leer del portapapeles y pegarlo:<\/p>\n\n\n\n
document.getElementById(\"pasteButton\").addEventListener(\"click\", async () => {\n          const text = await navigator.clipboard.readText();\n          document.getElementById(\"outputText\").value = text;\n          document.getElementById(\"statusMessage\").textContent = \"Texto pegado desde el portapapeles.\";\n       \n      });\n<\/code><\/pre>\n\n\n\n
Aqu\u00ed el ejemplo de funcionamiento completo, he a\u00f1adido unos try\/catch para proporcionar una experiencia mejor en caso de que se produzca un error al escribir o leer en el portapapeles. <\/p>\n\n\n\n
\n  See the Pen \n  Untitled<\/a> by David Boo (@David-Boo<\/a>)\n  on CodePen<\/a>.<\/span>\n<\/p>\n