用 Javascript 将内容复制到剪贴板

发表于 分类于 阅读次数：

在 js 中，将内容复制到剪贴板的原理是利用 document.execCommand() 方法进行操作.

document.execCommand()

document.execCommand() 的签名是这样的

1
bool = document.execCommand(aCommandName, aShwoDefaultUI, aValueArgument)

需要注意的是，该命令复制的内容是当前页面选中的内容.

Return value

返回一个 Boolean 值，如果不支持或被禁用就返回false.

注意不要使用返回值来验证用户浏览器是否支持该方法.

Parameters

aCommandName

要执行的命令的名称. 我们使用复制方法时，该值为 copy.

所有支持的命令参见 命令

aShwoDefaultUI

指示是否应显示默认用户界面的布尔值。这在Mozilla中没有实现。（？？什么界面？？啥东西啊？？在说什么）

aValueArgument

额外参数，有些命令才会需要到。

兼容性

from Caniuse

docuemnt.execCommand-compatibility

Usage

1
2
<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>
1
2
3
4
5
6
7
8
9
10
const btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
  const input = document.querySelector('#demoInput')
  input.select()
  if (document.execCommand('copy')) {
    console.log('复制成功')
  } else {
    console.log('复制失败')
  }
})

如我我们想要复制的不是输入框内的东西呢？我们来创建一个输入框再复制即可

1
2
3
4
5
6
7
8
9
10
11
12
13
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')) {
    console.log('复制成功')
  } else {
    console.log('复制失败')
  }
  document.body.removeChild(input)
})

坑

感谢 @axuebin 提醒

  • 在 IOS 下会出现白屏抖动 😡

    是因为先拉起了又收回了键盘. 解决办法，在代码中添加 input.setAttribute('readonly', 'readonly') 设置 input 为只读即可.

  • 在 IOS 下无法复制 😡

    是因为 input.select() 在 IOS 下没有选中全部内容. 我们使用 input.setSelectionRange(0, input.value.length) 即可.

参考链接