Методы JavaScript для доступа к буферу обмена:

1.Использование API буфера обмена (navigator.clipboard.readText):

API буфера обмена обеспечивает безопасный способ чтения и записи в буфер обмена. Вот как вы можете использовать navigator.clipboard.readText() для быстрого извлечения текстовых данных из буфера обмена.

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. Использование кнопки для извлечения содержимого буфера обмена:
Иногда вам может потребоваться активировать чтение буфера обмена только тогда, когда пользователь нажимает кнопку. Вот как это можно сделать:

Show Clipboard Content

3. Обработка разрешений на доступ к буферу обмена:
API буфера обмена требует разрешения пользователя, поэтому важно корректно решать возможные проблемы с разрешениями. Вот как убедиться, что у вас есть разрешение, прежде чем пытаться читать или писать в буфер обмена:

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

Пример записи в буфер обмена

Copy "Hello, World!" to Clipboard

Полный пример кода
Полный пример кода, позволяющий быстро узнать, что находится в буфере обмена, можно найти здесь, на GitHub Gist.

Если эта статья немного облегчила вам жизнь в области разработки, нажмите на это сердечко ❤️ и ждите еще больше волшебства JavaScript!