JS 复制内容到剪贴板

一、使用 document.execCommand

1、存在 input 标签时

<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>

选中 input 的值，然后使用 document.execCommand 方法实现复制：

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  const input = document.querySelector('#demoInput');
  input.select();
  if (document.execCommand('copy')) {
    document.execCommand('copy');
    console.log('复制成功');
  }
})

2、不存在 input 标签时

execCommand() 方法只能操作可编辑区域，也就是说只能对 <input>、<textarea> 这样的输入域使用这个方法。因此当没有 input 标签时，需要创建一个曲线救国：

<button id="btn">点我复制</button>

复制方法如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.setAttribute('value', '需要复制的值');
  input.select();
  if (document.execCommand('copy')) {
    document.execCommand('copy');
    console.log('复制成功');
  }
  document.body.removeChild(input);
})

注意，这种情况在 IOS 移动端下可能会出现以下问题：

2-1、键盘瞬间拉起的 bug

在代码中添加：

input.setAttribute('readonly', 'readonly')

使创建的 <input> 是只读的，就不会拉起键盘了。

2-2、复制失败

这个问题是由于 input.select() 在 IOS 下并没有选中全部内容，需要使用另一个方法来选中内容，即 input.setSelectionRange(0, input.value.length)

完整代码如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  const input = document.createElement('input');
  input.setAttribute('readonly', 'readonly');
  input.setAttribute('value', '需要复制的内容');
  document.body.appendChild(input);
  input.setSelectionRange(0, 9999);
  if (document.execCommand('copy')) {
    document.execCommand('copy');
    console.log('复制成功');
  }
  document.body.removeChild(input);
})

二、替代方法 navigator.clipboard

document.execCommand 方法即将被废弃，可以使用以下方法替代：

const text = '需要复制的内容';
if (navigator.clipboard) {
  navigator.clipboard.writeText(text);
}

三、完整的复制写法

完整复制方法整合如下：

const text = '需要复制的内容';
if (navigator.clipboard) {
  // clipboard api 复制
  navigator.clipboard.writeText(text);
} else {
  const textarea = document.createElement('textarea');
  document.body.appendChild(textarea);
  // 隐藏此输入框
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  textarea.style.pointerEvents = 'none';
  textarea.style.top = '0px';
  // 赋值
  textarea.value = text;
  // 选中
  textarea.select();
  // 复制
  document.execCommand('copy', true);
  // 移除输入框
  document.body.removeChild(textarea);
}