Hoy veremos cómo copiar y pegar texto en JavaScript.
Esto es leer del portapapeles y escribir en el portapapeles usando promesas.
En resumen, veremos cómo acceder al portapapeles con JavaScript (también conocido como clipboard)
Antes lo hacíamos con execComand pero teníamos la desventaja de que era síncrono. O sea que si copiábamos un gran texto, la interfaz se bloqueaba.
En este caso será asíncrono (si no sabes qué es asíncrono recomiendo leer: código asíncrono, síncrono y callbacks en JS)
Esta API también permite leer y escribir algo más que texto plano; pero por simplicidad veremos cómo copiar sólo texto.
Esta característica sólo servirá en localhost y en páginas web servidas con https
Por cierto, antes de entrar con este tutorial recomiendo leer:
Como sabemos, no todos los usuarios tienen un navegador actualizado o que soporte la API de Clipboard, por lo que debemos comprobar.
Para ello podemos poner el siguiente código:
if(navigator.clipboard){
//Perfecto, podemos usarlo
}else{
//No soporta la API, tenemos que usar viejos métodos
}
Como esto podría exponer la seguridad del usuario, se piden permisos.
No tenemos que pedirlos nosotros (como cuando tomamos una foto de la webcam), sino que en la primera llamada a readText
el navegador lo hará por nosotros.
La solicitud se ve así:
Para leer o ver lo que tiene copiado el usuario en el portapapeles, llamamos al método readText
. Como lo dije, está basado en promesas.
Aquí el código de ejemplo:
navigator.clipboard.readText()
.then(texto => {
console.log("Aquí tenemos el texto: ", texto);
})
.catch(error => {
// Por si el usuario no da permiso u ocurre un error
console.log("Hubo un error: ", error);
});
Si el usuario da permiso, en la consola se imprimirá lo que tenemos copiado:
Ahora veamos cómo escribir texto en el portapapeles, o cómo copiar texto automáticamente. Para esto usamos writeText
.
El código de ejemplo queda así:
navigator.clipboard.writeText("Soy un texto copiado al portapapeles")
.then(() => {
console.log("El texto ha sido copiado :-)");
})
.catch(error => {
// Por si el usuario no da permiso u ocurre un error
console.log("Hubo un error: ", error);
});
Si todo va bien, el texto se copiará en el portapapeles y saldrá lo siguiente en la consola:
Y si comprobamos nuestro portapapeles o pegamos en cualquier lugar lo que tenemos copiado, saldrá el texto que aparece en el script.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios