{"id":22145,"date":"2024-08-11T09:37:02","date_gmt":"2024-08-11T07:37:02","guid":{"rendered":"https:\/\/fran.cosmobuzz.es\/?p=22145"},"modified":"2024-08-20T21:49:15","modified_gmt":"2024-08-20T19:49:15","slug":"copiar-texto-al-portapapeles-con-javascript","status":"publish","type":"post","link":"https:\/\/fran.cosmobuzz.es\/en\/copiar-texto-al-portapapeles-con-javascript\/","title":{"rendered":"Copiar texto al portapapeles con Javascript"},"content":{"rendered":"<p>Para crear un bot\u00f3n de copiar al portapapeles en WordPress tan s\u00f3lo necesitar\u00e1s de un c\u00f3digo Javascript envuelto en html. Sin necesidad de plugins, de manera manual, podr\u00e1s insertar esta funcionalidad en cualquier p\u00e1gina en la que desees que un usuario copie y pege un texto.<\/p>\n\n\n\n<p>* En este ejemplo se copia el texto \u00ab<strong><em>Soy un Pro<\/em><\/strong>\u00ab<\/p>\n\n\n\n<pre class=\"wp-block-code has-base-2-color has-contrast-2-background-color has-text-color has-background has-link-color wp-elements-0a4fbcfc8a9a9d6e9da735fbd08df7c3\"><code>&lt;script&gt;\nfunction copiarAlPortapapeles() {\n  const textoACopiar = \"Soy un Pro\";\n  \n  navigator.clipboard.writeText(textoACopiar).then(() =&gt; {\n    const boton = document.getElementById(\"botonCopiar\");\n    boton.textContent = \"Copiado\";\n\n    \/\/ Restaurar el texto original del bot\u00f3n despu\u00e9s de 2 segundos\n    setTimeout(() =&gt; {\n      boton.textContent = \"Copiar\";\n    }, 2000);\n  }).catch(err =&gt; {\n    console.error('Error al copiar: ', err);\n  });\n}\n&lt;\/script&gt;\n\n&lt;button id=\"botonCopiar\" onclick=\"copiarAlPortapapeles()\"&gt;Copiar&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>As\u00ed quedar\u00eda el bot\u00f3n:<\/p>\n\n\n\n<script>\nfunction copiarAlPortapapeles() {\n  const textoACopiar = \"Soy un Pro\";\n  \n  navigator.clipboard.writeText(textoACopiar).then(() => {\n    const boton = document.getElementById(\"botonCopiar\");\n    boton.textContent = \"Copiado\";\n\n    \/\/ Restaurar el texto original del bot\u00f3n despu\u00e9s de 2 segundos\n    setTimeout(() => {\n      boton.textContent = \"Copiar\";\n    }, 2000);\n  }).catch(err => {\n    console.error('Error al copiar: ', err);\n  });\n}\n<\/script>\n\n<button id=\"botonCopiar\" onclick=\"copiarAlPortapapeles()\">Copiar<\/button>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Los estilos del bot\u00f3n pueden variar dependiendo del tema que uses y de la configuraci\u00f3n en el personalizador de WordPress.<\/p>\n\n\n\n<p><strong>Notas<\/strong>:<\/p>\n\n\n\n<p>JavaScript: Es el lenguaje del script que define la funcionalidad (copiar al portapapeles).<br>HTML: Es el lenguaje de marcado que estructura la p\u00e1gina (por ejemplo, el bot\u00f3n).<\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":22147,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[196],"tags":[222],"_links":{"self":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/posts\/22145"}],"collection":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/comments?post=22145"}],"version-history":[{"count":0,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/posts\/22145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/media\/22147"}],"wp:attachment":[{"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/media?parent=22145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/categories?post=22145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fran.cosmobuzz.es\/en\/wp-json\/wp\/v2\/tags?post=22145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}