Javascript如何将内容复制到剪贴板

2019年5月12日 177次阅读 来源: daydreammoon

需求

点击复制按钮，将激活码复制到剪贴板

《Javascript如何将内容复制到剪贴板》 copy.png

代码

第一种方法

btn.addEventlistener('click', copyContent);

function copyContent () {
  let val = document.querySelector('.avtive-code').innerText; // 激活码节点的内容
  document.addEventListener('copy', save); // 监听浏览器copy事件
  document.execCommand('copy'); // 执行copy事件
  document.removeEventListener('copy', save); // 移除copy事件，将save函数里面的阻止默认行为代码删掉

  // 保存方法
  function save(e) {
    e.clipboardData.setData('text/plain', val); // 剪贴板内容设置
    e.preventDefault();
  }
}

第二种方法

btn.addEventlistener('click', copyContent);

function copyContent() {
 let val = document.querySelector('.avtive-code').innerText; // 激活码节点的内容
  var input = document.createElement('input'); // 创建一个input元素
  input.value = val; // 给input赋值
  document.body.appendChild(input); // 将节点插入body里面
  input.select(); // 选中input节点
  document.execCommand("Copy"); // 执行浏览器复制命令
  document.body.removeChild(input); // 将临时的input元素删除
}
如果您喜欢这篇文章，那么记得动动你们的👋，给个like或者关注我哦👍。
    原文作者：daydreammoon
    原文地址: https://www.jianshu.com/p/9b7e554ea216
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞