Enfoque práctico de cómo copiar texto dentro de un elemento HTML al portapapeles con un solo clic usando JavaScript
Ofrecer la posibilidad de poder copiar texto al portapapeles es una funcionalidad muy común en las aplicaciones web y puede mejorar sustancialmente la experiencia de usuario de tus visitantes. Vamos a explorar cómo implementarla de manera efectiva.
En JavaScript, hay varias formas de copiar texto al portapapeles. Pero la API Clipboard es la recomendada. Veamos un ejemplo donde se copia el texto que está dentro de un elemento div de HTML:
<div id="textToCopy"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p></div><button id="copyButton" onclick="copyText()">Copiar</button>
function copyText() { // Texto a copiar const textToCopy = document.getElementById('textToCopy').innerText
// Usamos la API de Portapapeles para copiar el texto navigator.clipboard .writeText(textToCopy) .then(function () { // Cambiar el texto del botón y deshabilitar el botón document.getElementById('copyButton').innerText = '✓ Copiado' document.getElementById('copyButton').disabled = true
// Dejar el botón como en el estado inicial al cabo de 2 segundos setTimeout(function () { document.getElementById('copyButton').innerText = 'Copiar' document.getElementById('copyButton').disabled = false }, 2000) }) .catch(function (err) { console.error('Imposible copiar el texto', err) })}
Para ver el código completo puedes mirar aquí, aunque avisamos que este ejemplo no funciona en esta página debido a que está en un iframe. Tendrías que ejecutarlo en otro entorno.
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Copiar texto a portapapeles</title> <style> #textToCopy { border: 1px solid #333; padding: 0 4px; width: 300px; margin-bottom: 4px; }
#copyButton { padding: 4px 16px; } </style> </head>
<body> <div id="textToCopy"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div>
<button id="copyButton" onclick="copyText()">Copiar</button>
<script> function copyText() { const textToCopy = document.getElementById('textToCopy').innerText
navigator.clipboard .writeText(textToCopy) .then(function () { document.getElementById('copyButton').innerText = '✓ Copiado' document.getElementById('copyButton').disabled = true
setTimeout(function () { document.getElementById('copyButton').innerText = 'Copiar' document.getElementById('copyButton').disabled = false }, 2000) }) .catch(function (err) { console.error('Imposible copiar el texto', err) }) } </script> </body></html>
Esta API es relativamente nueva y aunque la soportan todos los navegadores modernos recomendamos mirar la tabla de compatibilidad de los navegadores.
Para copiar al portapapeles históricamente se utilizaba la instrucción document.execCommand('copy')
. Pero a día de hoy, este método se ha declarado obsoleto y se recomienda no usarlo.