js复制内容到剪贴板

卡恩.鸿蒙2024-02-28 15:02

在JavaScript中，复制内容到剪贴板可以使用 Clipboard API（现代浏览器支持）或通过创建隐藏的textarea元素并调用其select()和execCommand('copy')方法。

使用Clipboard API（适用于现代浏览器，如Chrome 43+、Firefox 42+、Edge、Safari 10+等）：

js 复制代码

navigator.clipboard.writeText('要复制的内容').then(() => {
    console.log('内容已复制到剪贴板');
}, () => {
    console.error('无法复制到剪贴板');
});

使用document.execCommand('copy')（兼容更多老版本浏览器，但部分功能已被废弃）：

js 复制代码

function copyToClipboard(text) {
    // 创建一个隐藏的textarea
    var textarea = document.createElement('textarea');
    textarea.style.position = 'absolute';
    textarea.style.left = '-9999px';

    // 将要复制的内容写入textarea
    textarea.value = text;

    // 将textarea添加到DOM树中，以便能执行选择和复制命令
    document.body.appendChild(textarea);

    // 选中文本
    textarea.select();

    try {
        // 执行复制操作
        document.execCommand('copy');
        console.log('内容已复制到剪贴板');
    } catch (e) {
        console.error('无法复制到剪贴板', e);
    }

    // 删除临时创建的textarea元素
    document.body.removeChild(textarea);
}

// 使用函数
copyToClipboard('要复制的内容');

请注意，由于安全性和隐私保护的原因，某些情况下浏览器可能会限制对剪贴板的访问，特别是在无用户交互的情况下。因此，在实际应用时，建议在用户触发某个事件（例如点击按钮）后执行复制操作。