JS复制文本基本分为两步-First: 选中需要复制的节点,及选区；Second: 执行document.execCommand('copy')命令复制
对于选区，属于HTMLInputElement 的<textarea> 和<input>元素支持element.select()方法
<div id="test1">
<input type="text" placeholder="你能复制我的人，但不能复制我的心" /><button>
点击复制文字
</button>
</div>
// 复制输入框文字
const target1 = document.querySelector('#test1>input')
const btn1 = document.querySelector('#test1>button')
btn1.addEventListener(
'click',
() => {
target1.select() //选中输入框中文字，这个方法执行后没有返回值
document.execCommand('copy') //复制成功则返回值为true
target1.blur() // 解除文字选中状态
},
false
)

其他元素不支持select()方法,但是浏览器也提供了相关选区的API,主要借助document.createRange()和document.getSelection()这两个方法同时也存在于window对象上
<div id="test2">
<span>你能复制我的人，但不能带走我的心</span>
<button>点击复制文字</button>
</div>
// 复制任意节点文字
const target2 = document.querySelector('#test2>span')
const btn2 = document.querySelector('#test2>button')
btn2.addEventListener(
'click',
() => {
const range = document.createRange()
const selection = document.getSelection()
range.selectNodeContents(target2)
selection.removeAllRanges()
selection.addRange(range)
document.execCommand('copy')
// 清除选中状态
selection.removeAllRanges()
},
false
)
如果我们想自定义复制的内容，该怎么办呢？我们可以临时创建一个节点，把需要复制的内容作为节点内容，然后使用上面提到的方法进行复制，如下面的两种方法都是可行的。
<div id="test3">
<button>点击复制变量</button>
</div>
// 复制自定义文字 方法一
const target3 = '你能复制我的人，但不能带走我的心eee'
const btn3 = document.querySelector('#test3>button')
btn3.addEventListener(
'click',
() => {
const range = document.createRange()
const selection = document.getSelection()
const fake = document.createElement('span')
// 重置样式
fake.style.all = 'unset'
fake.textContent = target3
// fixed定位防止选中节点时页面滚动到页面底部
fake.style.position = 'fixed'
fake.style.top = 0
// 让这个临时元素不可见，注意不能使用display: none和visibility: hidden,会导致元素选不中
fake.style.clip = 'rect(0, 0, 0, 0)'
// 保存空格和换行
fake.style.whiteSpace = 'pre'
document.body.appendChild(fake)
range.selectNodeContents(fake)
// 清除已有选区
selection.removeAllRanges()
selection.addRange(range)
document.execCommand('copy')
document.body.removeChild(fake)
},
false
)
上述代码中的注释部分都是非常重要的，网上很多教程的实现方式都有缺陷，本文实现的方法是从copy-to-clipboard抄袭的,基本考虑到了很多异常情况.不过我个人觉得使用textarea元素作为中转节点是更好的选择，起兼容性更好，结果可控。
<div id="test4">
<button>点击复制变量</button>
</div>
// 复制自定义文字 方法二
const target4 = '你能复制我的人，但不能带走我的心'
const btn4 = document.querySelector('#test4>button')
btn4.addEventListener(
'click',
() => {
const fake = document.createElement('textarea')
// 防止弹出键盘
fake.setAttribute('readonly', 'readonly')
fake.value = target4
fake.style.position = 'fixed'
fake.style.top = 0
fake.style.clip = 'rect(0, 0, 0, 0)'
document.body.appendChild(fake)
fake.select()
document.execCommand('copy')
document.body.removeChild(fake)
},
false
)
为啥不使用input元素呢，因为textarea能保持换行等.
上述方法在React组件中也是可以使用的，不过在使用过程中很多人发现一个问题document.execCommand ('copy') don't work in React，这个问题一开始我也遇到了，有人回答是因为document.execCommand ('copy')不能在React的合成事件中调用，只能直接在原生事件中调用,其实这是不对的，react-copy-to-clipboard这个组件不也是在合成事件中调用这个命令吗？经过不断尝试，我发现问题出现在一个小的细节上,我们一开始通过const selection = document.getSelection()获取选区操作对象,默认我们添加选区前，选区信息应该为空，可以使用下面的语句打印信息
console.log('选区个数', selection.rangeCount, '选区对象', selection)

需要注意的是selection对象是不能深克隆的，在控制台上如果展开对象打印结果显示的结果是selection最终的结果(如果后面修改过selection的话)而不是打印语句时的结果
这个结果在上面几个原生js的例子中都适用.但是在React的事件回调中，通过ocument.getSelection()获取的默认选区却不为空，如果把我们创建的节点直接塞进去,再执行document.getSelection()是不会复制成功的.
解决方法很简单，在添加选区前清除选区,不过我发现如果使用textarea作为中转节点则不存在这个问题。
if (selection.rangeCount > 0) {
selection.removeAllRanges()
}
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<div className="App">
<h1
onClick={e => {
const range = document.createRange()
const selection = document.getSelection()
const mark = document.createElement('span')
mark.textContent = 'text to copy'
// reset user styles for span element
mark.style.all = 'unset'
// prevents scrolling to the end of the page
mark.style.position = 'fixed'
mark.style.top = 0
mark.style.clip = 'rect(0, 0, 0, 0)'
// used to preserve spaces and line breaks
mark.style.whiteSpace = 'pre'
// do not inherit user-select (it may be `none`)
mark.style.webkitUserSelect = 'text'
mark.style.MozUserSelect = 'text'
mark.style.msUserSelect = 'text'
mark.style.userSelect = 'text'
mark.addEventListener('copy', function(e) {
e.stopPropagation()
})
document.body.appendChild(mark)
// The following line is very important
if (selection.rangeCount > 0) {
selection.removeAllRanges()
}
range.selectNodeContents(mark)
selection.addRange(range)
document.execCommand('copy')
document.body.removeChild(mark)
}}
>
Click to Copy Text
</h1>
</div>
)
}
}
export default App
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<div className="App">
<h1
onClick={e => {
const mark = document.createElement('textarea')
//防止移动端键盘弹出
mark.setAttribute('readonly', 'readonly')
mark.value = 'copy me'
mark.style.position = 'fixed'
mark.style.top = 0
mark.style.clip = 'rect(0, 0, 0, 0)'
document.body.appendChild(mark)
mark.select()
document.execCommand('copy')
document.body.removeChild(mark)
}}
>
Click to Copy Text
</h1>
</div>
)
}
}
export default App
最后再补充一点，使用上面的方法复制图片是否可行呢，
<div id="test">
<img
src="https://www.zxing.top/media/15546249493670/15547312147294.jpg"
alt=""
/>
<button>点击复制文x字</button>
</div>
const target = document.querySelector('#test>img')
const btn = document.querySelector('#test>button')
btn.addEventListener(
'click',
() => {
const range = document.createRange()
const selection = document.getSelection()
selection.removeAllRanges()
// range.selectNodeContents(target)
range.selectNode(target)
selection.addRange(range)
document.execCommand('copy')
selection.removeAllRanges()
},
false
)
注意上面的代码修改了一处,range.selectNode(target),上面的代码我测试了一下,可以复制图片,但是复制的是某种html对象，走一些编辑器上是可以粘贴的，但不保障兼容性,我测试了Mac上的Page应用,印象笔记和手机上的wps是可以直接粘贴的。