上周接到一个需求——点击按钮,复制指定的笔墨到粘贴板。我也是第一次做这类功用,末了经由过程查资料完成了这个功用。
正文
实在这个功用完成起来也不难,重要用到了两个要领: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();
}