H5 复制粘贴 - execCommand

需求:自动复制一段内容到剪切板, 让用户可以在其他客户端粘贴(发小广告做推广经常要用吧)

window.clipboardData (IE 才有)

是个很好用的对象, 但是 只在 IE 才有,
IE 被吐糟了一万年, 才发现他有个不错的地方.
IE 即将退出历史, 找点其他的吧.

ZeroClipboard (借助Flash)

是一个不错选择, 但是他还是借助的 flash 实现的
本人讨厌 Flash, 弃之.

window.prompt

这个还是算了吧, 一点都不友好. 手机用户还需要长按 再点击复制

document.execCommand (今天的猪脚)

[兼容性(can I use)](http://caniuse.com/#search=execCommand)

简介
当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法，通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作
(如bold, italics等), 也可以插入一个元素(如增加一个a链接) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable，通过执行execCommand
方法可以对当前活动元素进行很多操作。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

今天咱们只会用到 copy .

简介里说 当文档对象被转换为设计模式的时候（选中，设置contentEditable等），文档对象提供了一个execCommand方法.

但是咱们根本不想出现一个 textarea 好嘛, 否则和window.prompt有啥区别呢?

最简单最有效的方式就是把 textarea 给隐藏起来嘛

const copy = text => {
  const textarea = document.createElement("textarea")
  textarea.style.position = 'fixed'
  textarea.style.top = 0
  textarea.style.left = 0
  textarea.style.border = 'none'
  textarea.style.outline = 'none'
  textarea.style.resize = 'none'
  textarea.style.background = 'transparent'
  textarea.style.color = 'transparent'

  textArea.value = text
  document.body.appendChild(textarea)
  textArea.select()
  try {
    const msg = document.execCommand('copy') ? 'successful' : 'unsuccessful'
    console.log(msg)
  } catch (err) {
    console.log('unable to copy', err)
  }
  document.body.removeChild(textarea)
}

demo

  
  



献给我我可爱的胖子

  Copy