Copia texto al portapapeles con JavaScript. Incluye un botón accesible, confirmación real, manejo de permisos y una alternativa si falla.
Copiar texto con una confirmación que sea cierta
Para copiar texto al portapapeles utiliza writeText dentro de una acción del usuario y espera a que termine. No muestres «Copiado» inmediatamente después de pulsar. La solicitud puede fallar por las condiciones del navegador y una confirmación prematura haría creer que el dato ya está disponible cuando no lo está. Este snippet diferencia claramente inicio, éxito y alternativa manual.
Cuándo resulta útil este snippet
Un botón de copia facilita reutilizar un código de seguimiento, una referencia o una configuración. Es especialmente práctico cuando seleccionar con precisión resulta incómodo en móvil. Mantén el texto original visible y editable en esta práctica. Así la función sigue teniendo una alternativa natural si el navegador no permite escribir en el portapapeles o si la persona prefiere seleccionar solo una parte.
Código completo para probar en tu navegador
Copia este documento en un archivo index.html, guarda los cambios y ábrelo en el navegador. El ejemplo no requiere bibliotecas.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Botón para copiar texto al portapapeles con JavaScript</title>
<style>
*{box-sizing:border-box}body{font:16px/1.6 system-ui,sans-serif;max-width:900px;margin:2rem auto;padding:1rem;color:#17233b}label{display:block;font-weight:700;margin-top:1rem}input,textarea,select,button{font:inherit;padding:.65rem;max-width:100%}textarea{width:100%}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #173b94;outline-offset:3px}[hidden]{display:none!important}[role=tab][aria-selected=true]{background:#173b94;color:white}[role=tab]{border:1px solid #bdcbe2;border-radius:.5rem}[role=tabpanel]{padding:1rem;border:1px solid #bdcbe2}
</style>
</head>
<body>
<label for="texto">Texto que quieres copiar</label>
<textarea id="texto" rows="3">Este texto se puede editar.</textarea>
<button id="copiar" type="button">Copiar texto</button>
<p id="estado" role="status"></p>
<script>
const campo = document.querySelector('#texto');
const boton = document.querySelector('#copiar');
const estado = document.querySelector('#estado');
boton.addEventListener('click', async () => {
boton.disabled = true;
estado.textContent = '';
try {
await navigator.clipboard.writeText(campo.value);
estado.textContent = 'Texto copiado.';
} catch {
estado.textContent = 'No se pudo copiar. Selecciona el texto y usa la opción Copiar de tu dispositivo.';
campo.focus();
campo.select();
} finally {
boton.disabled = false;
}
});
</script>
</body>
</html>Cómo instalar y probar el ejemplo
Guarda el documento completo como index.html y utiliza un servidor de desarrollo o una página HTTPS. La API depende de un contexto seguro y de condiciones que varían entre navegadores. Abrir un archivo por una ruta local no reproduce necesariamente el alojamiento donde publicarás. Escribe una frase reconocible, pulsa copiar y pégala en un editor de texto para comprobar el contenido exacto.
Por qué el botón queda desactivado durante la operación
Desactivar temporalmente evita solicitudes repetidas mientras la promesa está pendiente. Finally devuelve el control a su estado utilizable tanto si funciona como si falla. Sin esa limpieza, un rechazo podría dejar el botón bloqueado. El ejemplo no sustituye el texto del botón con una animación ni mueve el foco en el caso satisfactorio: el mensaje de estado comunica el resultado sin interrumpir el recorrido.
Qué ocurre cuando no hay permiso
El bloque de error explica la limitación y selecciona el texto para facilitar la copia manual. No intenta leer el portapapeles ni solicitar información que la tarea no necesita. Tampoco utiliza mecanismos antiguos de copia como una promesa de compatibilidad universal. La alternativa debe seguir siendo comprensible en un dispositivo donde seleccionar automáticamente no produce exactamente la misma experiencia que en escritorio.
Adaptarlo a varios códigos de una página
Si tienes varios bloques, relaciona cada botón con su propio campo o busca los elementos dentro de un contenedor común. No copies el mismo identificador varias veces. Un único selector que encuentra el primer campo puede hacer que todos los botones copien la misma referencia. Comprueba cada instancia con un contenido diferente y utiliza nombres que indiquen cuál de las acciones acabas de ejecutar.
Saltos de línea, espacios y contenido vacío
WriteText recibe la cadena que le pases. Si eliminas espacios con trim, puedes alterar una configuración donde la sangría o un salto final tiene valor. Decide esa normalización según el dato, no por rutina. Para una referencia corta quizá conviene retirar espacios accidentales; para un ejemplo de código puede ser importante conservarlos. El campo vacío también necesita una decisión: copiarlo vacía el contenido textual anterior del portapapeles.
Accesibilidad del resultado
El control es un botón nativo, por lo que se puede activar con teclado sin programar un div como si lo fuera. El mensaje utiliza una región de estado y permanece en el documento. No dependas solo de un cambio de color o de un icono breve. Si añades estilos, conserva el foco visible y suficiente separación para pulsarlo. La etiqueta del campo permite entender qué contenido se copiará.
Integración en WordPress
En una página puedes introducir una sola instancia mediante un bloque HTML personalizado, siempre que tu instalación permita el código necesario. Si el componente se repetirá en muchos artículos, centraliza su script mediante el mecanismo apropiado del proyecto. Comprueba que el optimizador de JavaScript no ejecuta la inicialización antes de que exista el bloque. Repetir scripts con nombres globales puede provocar conflictos al añadir más de una instancia.
Errores que conviene identificar
Si la consola indica que clipboard no está disponible, comprueba el contexto y la capacidad antes de modificar los estilos. Si copia otro texto, revisa los selectores. Si aparece éxito pero el pegado conserva un valor anterior, verifica que la confirmación depende realmente de await. No soluciones un rechazo ocultando el mensaje: la persona necesita saber si puede continuar confiando en el resultado.
Recorrido de comprobación
Prueba una frase corta, varias líneas, texto acentuado y el campo vacío. Realiza una pulsación con ratón y otra con teclado. Después fuerza una condición donde la función no esté disponible y comprueba la alternativa. No basta con ver aparecer el mensaje: pega el dato en otro campo y compáralo. Este recorrido separa el aspecto de la interfaz del resultado que realmente se guardó.
Una mejora posterior con alcance definido
Puedes añadir un botón por bloque y mantener un solo mensaje de estado en el contenedor. Evita copiar automáticamente al seleccionar texto o al abrir la página, porque modifica información del dispositivo sin una acción clara. Si necesitas copiar HTML con formato, se trata de otra operación y exige revisar tipos admitidos. Para este caso, mantener texto plano ofrece una función pequeña, previsible y fácil de reutilizar.
Una prueba de rechazo sin confundir al usuario
Puedes comprobar el tratamiento del error en un entorno de pruebas donde la capacidad no esté disponible, sin cambiar la configuración de seguridad de una web real. El resultado esperado es un mensaje alternativo, no una alerta de éxito. Después vuelve a las condiciones normales y repite la copia. Si solo ensayas el camino satisfactorio, no sabes si el botón se recupera cuando la operación falla. Conserva también una alternativa de selección que resulte visible sin abrir la consola.
Diferenciar una copia nueva del dato anterior
Antes de la prueba, coloca una frase distinta en el portapapeles mediante una acción manual. Después pulsa el botón y pega en otro campo. Así reconoces si realmente se sustituyó la información o estás observando un valor conservado de una prueba anterior. Esta comprobación es especialmente útil si utilizas varios botones parecidos. Cada referencia debe poder distinguirse y el mensaje de estado debe corresponder a la última operación que terminó, sin mezclar respuestas de solicitudes anteriores.
Guías relacionadas para seguir practicando
Puedes ampliar esta práctica con Cómo usar addEventListener y Entender el DOM.
