Cómo leer, copiar y pegar del portapapeles en JavaScript

Trabajar con el portapapeles en JavaScript puede ser muy útil para mejorar la experiencia del usuario en aplicaciones web. En este artículo, exploraremos cómo leer, copiar y pegar datos del portapapeles utilizando las API del Portapapeles de JavaScript.

Copiar texto al portapapeles

Copiar texto al portapapeles es una tarea común que se puede realizar fácilmente usando el método navigator.clipboard.writeText. Aquí hay un ejemplo sencillo:

function copiarAlPortapapeles(texto) {
    navigator.clipboard.writeText(texto).then(() => {
        console.log('Texto copiado al portapapeles');
    }).catch(err => {
        console.error('Error al copiar al portapapeles: ', err);
    });
}

// Uso
copiarAlPortapapeles('¡Hola, mundo!');

En este ejemplo, el texto “¡Hola, mundo!” se copia al portapapeles y, si tiene éxito, se muestra un mensaje en la consola.

Leer texto del portapapeles

Para leer texto del portapapeles, se utiliza el método navigator.clipboard.readText. Aquí tienes un ejemplo:

function leerDelPortapapeles() {
    navigator.clipboard.readText().then(texto => {
        console.log('Texto leído del portapapeles: ', texto);
    }).catch(err => {
        console.error('Error al leer del portapapeles: ', err);
    });
}

// Uso
leerDelPortapapeles();

En este ejemplo, el texto actualmente en el portapapeles se lee y se muestra en la consola.

Pegar texto desde el portapapeles

Pegar texto desde el portapapeles implica leerlo y luego insertarlo en un campo de texto o en otro elemento del DOM. Aquí tienes un ejemplo práctico:

function pegarEnInput(inputElement) {
    navigator.clipboard.readText().then(texto => {
        inputElement.value = texto;
        console.log('Texto pegado en el input: ', texto);
    }).catch(err => {
        console.error('Error al pegar desde el portapapeles: ', err);
    });
}

// Uso
const miInput = document.getElementById('miInput');
pegarEnInput(miInput);

En este ejemplo, el texto del portapapeles se pega en un campo de texto con el id miInput.

Consideraciones de Seguridad

El uso de la API del Portapapeles está sujeto a ciertas restricciones de seguridad. Por ejemplo, las acciones de lectura y escritura en el portapapeles deben estar iniciadas por una acción del usuario, como un clic o una pulsación de tecla. Además, algunos navegadores pueden solicitar permiso al usuario antes de permitir el acceso al portapapeles.

Conclusión

Manipular el portapapeles en JavaScript es una funcionalidad poderosa que puede mejorar significativamente la interacción del usuario en una aplicación web. Con los métodos navigator.clipboard.writeText y navigator.clipboard.readText, puedes fácilmente copiar y pegar texto desde y hacia el portapapeles. Asegúrate de manejar correctamente los errores y estar al tanto de las restricciones de seguridad para proporcionar una experiencia de usuario fluida y segura.