javascript

Acceder al portapapeles con JavaScript

Introducción

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)

¿Cómo podemos acceder al portapapeles con JavaScript?

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.

A los desarrolladores

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:

Comprobar disponibilidad

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
}

Permisos

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í:

Solicitud de permiso para acceder al portapapeles con JavaScript

Leer del portapapeles

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:

Leer portapapeles

Escribir en el portapapeles

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:

Escribir en portapapeles

Y si comprobamos nuestro portapapeles o pegamos en cualquier lugar lo que tenemos copiado, saldrá el texto que aparece en el script.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Servidor HTTP en Android con Flutter

El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…

4 días hace

Imprimir automáticamente todos los PDF de una carpeta

En este post te voy a enseñar a designar una carpeta para imprimir todos los…

5 días hace

Guía para imprimir en plugin versión 1 desde Android

En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…

1 semana hace

Añadir tasa de cambio en sistema de información

Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…

2 semanas hace

Comprobar validez de licencia de plugin ESC POS

Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…

2 semanas hace

Imprimir euro € en impresora térmica

Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…

4 semanas hace

Esta web usa cookies.