移动Web开发——复制操作

上周接到一个需求——点击按钮，复制指定的文字到粘贴板。我也是第一次做这种功能，最后通过查资料实现了这个功能。

正文

其实这个功能实现起来也不难，主要用到了两个方法：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)
}

Demo地址

另一种方法

上面的方面虽然可以实现功能，但创建一个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(); 
}