JS实现copy功能

在日常浏览网页当中，我们经常会ctrl+c, ctrl+v，去复制内容，也会点击某个按钮去复制内容，那么这个功能如何实现的呢，下面我们一起来瞅瞅吧。

复制功能分析：

1. 复制的内容存在2种情况，一种是在文本框，一种就是在普通dom节点里。
2. 复制的内容需要被选中，才能被复制
3. 实现复制的核心方法document.execCommand('copy')

一. 文本框复制实现

`

<input type="text" id="t1" value="我是文本框里面的内容" />
<button id="b1">复制</button>

// js代码
let t1 = document.getElementById('t1')
let b1 = document.getElementById('b1')
b1.onclick = function() {
if (t1.value.length) {
        t1.select() // 选中文本框的内容
        document.execCommand('copy')
	} else {
		alert('你倒是写点字呀，不然复制啥？')
	}
}
    

`

input文本框的内容复制相对简单，获取到文本框节点，调用select()方法选中文本框的内容，然后执行document.execCommand('copy')，你就可以在你电脑上任何可以输入的地方执行ctrl+v了。

文本框复制注意事项

1. input框不能设置disabled
2. input宽高不能为0
3. input样式不能为disaply:none,或者设置hidden

二. dom节点内容复制

`

<div class="text-div">点击旁边的按钮，复制我这个div里的内容吧</div>
<button id="b2">copy</button>

// js代码
let b2 = document.getElementById('b2')
let textDiv = document.getElementsByClassName('text-div')[0]

b2.onclick = function() {
let range = document.createRange() // 创建一个文档片段
range.selectNode(textDiv) // 设置文档片段内容
    
let selection = window.getSelection() // `getSelection`方法返回一个`Selection`对象，表示用户现在选中的文本
if (selection.rangeCount > 0) { // rangeCount属性是判断当前Selection对象有多少个选中的文档片段
	selection.removeAllRanges() // 移除其他所有文档片段
	selection.addRange(range) // 添加我们创建的文档片段
	document.execCommand('copy') // 执行
}	
}

`

注意事项 普通dom节点的复制功能，需要创建文档片段，也就是Range对象，一旦一个 Range 对象被建立，在使用他的大多数方法之前需要去设置他的临界点。Range相关知识点请点击Range。

总结

上面两个代码示例就是web端点击button实现复制功能的小demo,这个功能相对比较冷门，实现copy的核心方法就是document.execCommand('copy')。