前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >原生js 复制内容到剪切板

原生js 复制内容到剪切板

作者头像
WahFung
发布2020-08-24 15:08:34
7K0
发布2020-08-24 15:08:34
举报
文章被收录于专栏:前端技术分享前端技术分享

方法一:

代码语言:javascript
复制
function copyHandle(content){
  let copy = (e)=>{
      e.preventDefault()
      e.clipboardData.setData('text/plain',content)
      alert('复制成功')
      document.removeEventListener('copy',copy)
  }
  document.addEventListener('copy',copy)
  document.execCommand("Copy");
}
代码语言:javascript
复制

过程:

1. document.execCommand("Copy") 触发复制监听事件

2. e.clipboardData.setData 将内容添加到剪切板

3. 复制完成后,取消监听事件,否则会触发多次

应用场景:

已知复制的内容,传入内容直接调用函数

方法二:

代码语言:javascript
复制
function copyLink(dom) {
      let range = document.createRange();
      let selection = window.getSelection();
      range.selectNode(dom);
      selection.removeAllRanges();
      selection.addRange(range);
      let bool = document.execCommand("copy", "false", null);
      if (bool) {
        alert("复制成功");
      }
      document.execCommand("unselect", "false", null);
}

过程:

1. range.selectNode 创建选取内容范围

2. removeAllRanges 清除已选择的内容

3. addRanges 添加选取内容,模拟用户选取

4. document.execCommand("Copy") 触发复制事件

5. document.execCommand("unselect", "false", null) 取消选取区域

应用场景:

复制指定节点的内容

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

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

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

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

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