挪动Web开辟——复制操纵

2024年4月22日 218次阅读 来源: funnyF2E

上周接到一个需求——点击按钮，复制指定的笔墨到粘贴板。我也是第一次做这类功用，末了经由过程查资料完成了这个功用。

正文

实在这个功用完成起来也不难，重要用到了两个要领：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(); 
}
    原文作者：funnyF2E
    原文地址: https://segmentfault.com/a/1190000007633136
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞