js实现粘贴板复制

1.创建一个隐藏的输入元素，然后通过 JavaScript 模拟用户操作来复制文本

实现

document.getElementById('copyButton').addEventListener('click', function() {
  const input = document.createElement('input');
  input.value = 'Hello, World!';
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
  console.log('Text copied to clipboard');
});

2.使用浏览器内置api navigator.clipboard.writeText(code)

实现

document.getElementById('copyButton').addEventListener('click', function() {
  navigator.clipboard.writeText('Hello, World!').then(() => {
    console.log('Text copied to clipboard');
  }).catch(err => {
    console.error('Failed to copy text: ', err);
  });
});

对比

安全性

• navigator.clipboard.writeText(code) 需要在用户交互的上下文中调用，例如点击事件处理程序中。这是为了防止恶意脚本在没有用户许可的情况下修改剪贴板内容。
• 传统方法可能会绕过这些安全限制，但这样做通常不被推荐，因为存在安全风险。

兼容性

• navigator.clipboard.writeText(code) 在较新的浏览器中支持良好，但在一些旧的或非主流浏览器中可能不支持。
• 传统方法虽然代码复杂，但可以在更多类型的浏览器中运行。