js复制内容到剪贴板

在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('要复制的内容');

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

相关推荐
froginwe115 分钟前
Python3与MySQL的连接:使用mysql-connector
开发语言
xjt_090119 分钟前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
杜子不疼.25 分钟前
PyPTO:面向NPU的高效并行张量编程范式
开发语言
lly20240625 分钟前
C# 结构体(Struct)
开发语言
我是伪码农30 分钟前
Vue 2.3
前端·javascript·vue.js
YMWM_36 分钟前
python3继承使用
开发语言·python
Once_day1 小时前
C++之《程序员自我修养》读书总结(1)
c语言·开发语言·c++·程序员自我修养
辰风沐阳1 小时前
JavaScript 的宏任务和微任务
javascript
喜欢喝果茶.1 小时前
QOverload<参数列表>::of(&函数名)信号槽
开发语言·qt