Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
105 lines (70 sloc) 2.71 KB
title date categories tags
用 Javascript 将内容复制到剪贴板
2019-03-25 08:00:11 -0700
心得
JavaScript

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

document.execCommand()

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

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

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

Return value

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

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

Parameters

aCommandName

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

所有支持的命令参见 命令

aShwoDefaultUI

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

aValueArgument

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

兼容性

from Caniuse

docuemnt.execCommand-compatibility

Usage

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

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

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) 即可.

参考链接

You can’t perform that action at this time.