上周接到一个需求——点击按钮，复制指定的文字到粘贴板。我也是第一次做这种功能，最后通过查资料实现了这个功能。
正文
其实这个功能实现起来也不难，主要用到了两个方法：execCommand和select。
execCommand：可以让我们执行如复制、剪切、粘贴等命令，还可以改变字体颜色、大小等。更多具体的用法可以看这里，在这就不说了。select：只有input和textarea可以执行该方法；用于选取文本框中的内容。
有了这两个方法，前面的功能就有了大概的思路：首先动态创建input元素，然后动态制定input[value]；执行select()进行选中，然后通过execCommand方法执行复制即可。
接下来就是代码实现了：
function copyContent(eleId){
var temp = document.createElement("input")
temp.setAttribute("value",document.getElementById(eleId).innerhtml)
document.body.appendChild(temp)
temp.select()
document.execCommand("copy")
document.body.removeChild(temp)
}另一种方法
上面的方面虽然可以实现功能，但创建一个input元素然后再删掉感觉不太好，能不能直接copy指定DOM元素呢？其实是可以的，这里我们需要先介绍几个API：
document.createRange()：返回一个Range对象，用来创建选中容器。Range.selectNode(referenceNode)：用来设定一个包含节点和节点内容的Range。window.getSelection()：返回一个 Selection 对象，表示用户选择的文本。Selection.addRange(range):将一个区域（Range）对象加入选区。Selection.removeRange(range)/removeAllRanges():从选区中移除一个区域/将所有的区域都从选区中移除。
要用到的API就上面这些，这里直接上Demo
下面是主要代码：
function copyToClipboard(eleId){
var copyDOM = document.getElementById(eleId);
var range = document.createRange();
range.selectNode(copyDOM);
window.getSelection().addRange(range);
document.execCommand(‘copy‘);
window.getSelection().removeAllRanges();
}