前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS实现复制内容到剪贴板的方法

JS实现复制内容到剪贴板的方法

作者头像
别盯着我的名字看
发布2022-06-09 13:14:47
2.5K0
发布2022-06-09 13:14:47
举报
文章被收录于专栏:前端专栏前端专栏

复制方法

代码语言:javascript
复制
/**
 * 复制功能
 * text 传入要复制的文本
 * callback 复制完成后的回调
*/
function copy(text, callback) {
    // 实现复制方法一:
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text);
        callback && callback(true);
        return;
    }

    // 实现复制方法二:
    var copyInput = document.getElementById('copyInput');
    if (!copyInput) {
        var copyInput = document.createElement('input');
        copyInput.setAttribute('id', 'copyInput');
        copyInput.style.position = 'fixed';
        copyInput.style.left = '-100%';
        copyInput.style.top = '0';
        copyInput.style.zIndex = -100;
        copyInput.style.opacity = 0;
        document.body.appendChild(copyInput);
    }
    copyInput.value = text;  
    copyInput.focus();
    copyInput.select();

    // document.execCommand 可能会被废弃
    if (document.execCommand('copy')) {
        document.execCommand('copy');
    }

    copyInput.blur();

    callback && callback(true);
}

调用方法

代码语言:javascript
复制
copy('传入你要复制的文本');

相关文章

navigator.clipboard

document.execCommand

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-10-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 复制方法
  • 调用方法
  • 相关文章
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档