Técnicas de JavaScript para acceder al portapapeles:

1.Usando la API del Portapapeles (navigator.clipboard.readText):

La API del Portapapeles proporciona una forma segura de leer y escribir en el portapapeles. Así es como puedes usar navigator.clipboard.readText() para recuperar rápidamente datos de texto del portapapeles.

async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        console.log('Clipboard content:', text);
        alert('Clipboard content: '   text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

// Trigger the function
getClipboardContent();

2. Usar un botón para recuperar el contenido del portapapeles:
A veces, es posible que desee activar la lectura del portapapeles solo cuando el usuario hace clic en un botón. Así es como puedes hacerlo:

Show Clipboard Content

3. Manejo de permisos para acceso al portapapeles:
La API del Portapapeles requiere el permiso del usuario, por lo que es importante manejar los posibles problemas de permisos con elegancia. A continuación le indicamos cómo asegurarse de tener permiso antes de intentar leer o escribir en el portapapeles:

async function getClipboardContent() {
    try {
        // Request permission to read from the clipboard
        const readPermission = await navigator.permissions.query({ name: 'clipboard-read' });
        if (readPermission.state === 'granted' || readPermission.state === 'prompt') {
            const text = await navigator.clipboard.readText();
            alert('Clipboard content: '   text);
        } else {
            alert('Clipboard read access denied');
        }
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

async function writeToClipboard(text) {
    try {
        // Request permission to write to the clipboard
        const writePermission = await navigator.permissions.query({ name: 'clipboard-write' });
        if (writePermission.state === 'granted' || writePermission.state === 'prompt') {
            await navigator.clipboard.writeText(text);
            alert('Text copied to clipboard: '   text);
        } else {
            alert('Clipboard write access denied');
        }
    } catch (err) {
        console.error('Failed to write to clipboard:', err);
    }
}

Ejemplo de escritura en el portapapeles

Copy "Hello, World!" to Clipboard

Código de ejemplo completo
Puedes encontrar el código de ejemplo completo para descubrir rápidamente qué hay en tu portapapeles aquí en GitHub Gist.

Si este artículo hizo tu vida de desarrollo un poco más fácil, toca ese corazón ❤️ y ¡quédate para disfrutar de más magia de JavaScript!