Técnicas JavaScript para acessar a área de transferência:

1.Usando a API da área de transferência (navigator.clipboard.readText):

A API Clipboard fornece uma maneira segura de ler e gravar na área de transferência. Veja como você pode usar navigator.clipboard.readText() para recuperar rapidamente dados de texto da área de transferência.

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. Usando um botão para buscar o conteúdo da área de transferência:
Às vezes, você pode querer acionar a leitura da área de transferência somente quando o usuário clicar em um botão. Veja como você pode fazer isso:

Show Clipboard Content

3. Tratamento de permissões para acesso à área de transferência:
A API Clipboard requer permissão do usuário, por isso é importante lidar com possíveis problemas de permissão com elegância. Veja como garantir que você tenha permissão antes de tentar ler ou gravar na área de transferência:

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);
    }
}

Exemplo de gravação na área de transferência

Copy "Hello, World!" to Clipboard

Código de exemplo completo
Você pode encontrar o código de exemplo completo para descobrir rapidamente o que está na sua área de transferência aqui no GitHub Gist.

Se este artigo tornou sua vida de desenvolvimento um pouco mais fácil, toque nesse coração ❤️ e fique por aqui para mais magia do JavaScript!