La API del Portapapeles puede copiar texto después de que un visitante activa un control. Debido a que el acceso al portapapeles depende de los permisos y del contexto, ejecútelo directamente desde el controlador de clics e informe cuando no esté disponible.
copyButton.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(textToCopy);
status.textContent = "Copied";
} catch {
status.textContent = "Could not copy. Select the text and copy it manually.";
}
});Hacer comprensible la acción
- Utilice un botón real con una etiqueta como "Copiar enlace".
- Anuncie el resultado en una región de estado cercana cuando, de otro modo, el mensaje se perdería.
- Mantenga el texto original seleccionable para que los visitantes tengan otra forma de copiarlo.
Manejar las restricciones del navegador
Las escrituras en el portapapeles generalmente requieren un contexto seguro y un gesto del usuario. No finja en silencio que la copia tuvo éxito cuando la promesa se rechaza.
Prueba con activación del teclado y con permiso del portapapeles denegado. Un respaldo claro es mejor que un botón que parece funcionar pero deja el portapapeles sin cambios.