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或者关注我哦👍。