2019-01-23 js实现浏览器复制文本功能

网上见到了好多处理方式, 尝试中发现很多都会有各种问题, 目前觉得比较简便的实现方式有两种:

1. 使用document.execCommand api 实现

目前常用的主流浏览器都兼容

• 注意:
  1. document.execCommand()方法只适用于input, textarea元素
  2. 用来copy其文本的input元素, 千万不要设置为隐藏文本域, 如: type="hidden"; 会导致文本无法复制
• 代码

// 准备文本
const text = '复制个锤子'
// 创建input元素
const input = document.createElement('input')
// 解决在移动端进行复制时产生的白屏抖动问题
input.setAttribute('readonly', 'readonly')
// 得到文本
input.setAttribute('value', text )
// 添加元素
document.body.appendChild(input)
// 选择复制对象
input.select()
// 进行复制
if (document.execCommand('copy')) {
  document.execCommand('copy')
}
console.log('复制成功')
document.body.removeChild(input)

使用第三方插件: clipboard.js

传送--clipboard.js官网