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

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

相关推荐
To_OC2 小时前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode
Scott9999HH2 小时前
【IIoT流量实战】蒸汽管道阀门全关却仍有流量?用 Python 实现涡街信号 FFT 频谱分析与温压全补偿积算网关,深度拆解靠谱的涡街流量计厂家硬核技术标准
开发语言·python
码智社3 小时前
AES加密原理详解及Java实现加解密实战
java·开发语言
AI云海3 小时前
python 列表、元组、集合和字典
开发语言·python
小林ixn4 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
萧瑟余晖4 小时前
JDK 26 新特性详解
java·开发语言
马优晨5 小时前
Freemarker 完整讲解(后端 Java 模板引擎)
java·开发语言·freemarker·freemarker 完整讲解·freemarker模板引擎
窝子面6 小时前
手搓最简前后端协作-node
javascript·数据库
人邮异步社区7 小时前
怎么把C语言学到精通?
c语言·开发语言
kyriewen7 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距,比我想的大得多
前端·javascript·ai编程