在JavaScript中，操作剪切板通常涉及到读取或写入文本到系统的剪切板。过去浏览器一般使用 document.execCommand('copy') 之类的实现剪切板的操作。现代浏览器通过navigator.clipboard API提供了对剪切板的原生支持。这个API包括writeText()方法用于写入文本，以及readText()方法用于读取文本。

下面是一个简单的例子，展示如何使用这些方法：

写入文本到剪切板

async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        console.log('Text copied to clipboard: ' + text);
    } catch (err) {
        console.error('Failed to copy to clipboard: ', err);
    }
}

// 使用函数
copyToClipboard('Hello, World!');

从剪切板读取文本

async function readFromClipboard() {·
    try {
        const text = await navigator.clipboard.readText();
        console.log('Read from clipboard: ' + text);
    } catch (err) {
        console.error('Failed to read from clipboard: ', err);
    }
}

// 使用函数
readFromClipboard();

使用navigator.clipboard API需要确保用户已经与页面进行了交互（例如点击按钮），因为大多数现代浏览器出于安全原因限制了在没有用户输入的情况下访问剪切板的能力。

另外，navigator.clipboard API可能在某些老旧浏览器上不可用，如果你正在开发一个需要广泛浏览器支持的项目，并且希望提供剪切板功能，可以考虑使用像clipboard.js这样的库，它不需要直接的JavaScript来实现复制功能，并且处理了很多兼容性问题。

最后，与许多新 API 一样，Clipboard API 仅支持通过 HTTPS 提供的页面。为帮助防止滥用，仅当页面是活动选项卡时才允许访问剪贴板。活动选项卡中的页面无需请求许可即可写入剪贴板，但从剪贴板读取始终需要许可。

修改时间 2024-09-20



真诚赞赏，手留余香

微信支付