访问剪贴板的 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.处理剪贴板访问权限：
Clipboard 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 魔法！