通过JavaScript将内容复制到剪贴板的两种常见方法

常用方法

查了万能谷歌后，常见的方法主要有以下两种：

第三方库：clipboard.js Native方法：document.execCommand()

让我们看看这两种方法是如何分别使用的。

剪贴板. js

这是剪贴板的官方网站：https://clipboardjs.com/,看起来很简单。

引用

直接参考：

脚本src=' http : list/clipboard . min . js '/脚本

包：npm安装剪贴板-保存，然后从“剪贴板”导入剪贴板；

使用

从输入框复制现在页面上有一个输入标签，我们需要复制内容，我们可以这样做：

input id=' demo input ' value=' hello world ' button class=' BTN ' data-clipboard-target=' # demo input '由我复制/button从'剪贴板'导入剪贴板；const btnCopy=新剪贴板(' BTN ')；请注意，数据-剪贴板-目标属性被添加到按钮标签，其值是需要复制的输入的id。顾名思义，内容是从整个标签复制而来的。

直接复制

有时候，我们不想从输入中复制内容，只是直接从变量中取值。如果我们能在Vue做到这一点：

button class=' BTN ' : data-clipboard-text=' copy value '单击我复制/button

从“剪贴板”导入剪贴板；const btnCopy=新剪贴板(' BTN ')；this.copyValue=' hello world事件

有时候复制后需要做一些事情，所以需要回调函数的支持。

将以下代码添加到处理程序中：

//成功复制后执行的回调函数clipboard.on ('success '，function(e){ console . info(' action : '，e . action)；//动作名称，例如：action : copy console . info(' text : '，e . text)；//内容，如：text:hello word console . info(' trigger : '，e . trigger)；//触发器元素：例如：button class=' BTN ' : data-clipboard-text=' copy value '点击我复制/button e . clearselection()；//清除所选内容})；//回调函数clipboard.on ('error '，函数(e) {console。复制失败后执行的错误(' action: '，即操作)；console.error('Trigger: '，e . trigger)；});摘要

文档中还提到，如果单页使用剪贴板，为了让生命周期管理更优雅，使用后记得销毁btn.destroy()。

剪贴板很容易使用。然而，仅仅为了复制功能而使用额外的第三方库是不够优雅的。这个时候该怎么办？那就用土生土长的方式去做。

Document.execCommand()方法

让我们首先看看这个方法是如何在MDN上定义的：

这允许用户运行命令来操作可编辑区域的内容。

这意味着您可以允许运行命令来操作可编辑区域的内容，请注意它是可编辑区域。

定义

bool=document . exec command(acommand name，aShowDefaultUI，aValueArgument)

方法返回一个布尔值，指示操作是否成功。

ACommandName:表示命令名，如：复制、剪切等。(有关更多命令，请参见命令)；AShowDefaultUI:是否显示用户界面一般为假；AValueArgument:有些命令需要额外的参数，一般不使用；和睦相处

其实这个方法之前的兼容性并不是很好，不过好在现在基本兼容所有主流浏览器，可以在移动端使用。

使用

从输入框复制现在页面上有一个输入标签。我们想复制里面的东西。我们可以做到这一点：

输入id=' demoinput '值=' hello world '按钮id=' BTN '单击我复制/buttonjs代码

const BTN=document . query selector(' # BTN ')；btn.addEventListener('click '，()={ const input=document . queryselector(' # demo input ')；input . select()；if(document . exec command(' copy '){ document . exec command(' copy ')；Console.log(“复制成功”)；}})复制到其他地方

有时页面上没有输入标签，所以我们可能需要从div复制内容或者直接复制变量。

请记住，execCommand()方法的定义中提到它只能操作可编辑区域，这意味着除了输入和textarea等输入字段之外，不能使用该方法。

此时，我们需要曲线来拯救国家。

按钮id='btn '单击我复制/按钮

javascript，javascript

const BTN=document . query selector(' # BTN ')；btn.addEventListener('click '，()={ const input=document . createelement(' input ')；document.body.appendChild(输入)；Input.setAttribute('value '，'听说你要复制我')；input . select()；if(document . exec command(' copy '){ document . exec command(' copy ')；Console.log(“复制成功”)；} document.body.removeChild(输入)；})曲线救国成功吗？使用这种方法时，会遇到几个凹坑。

遇到的坑

这种方法在Chrome下调试时效果很好。然后，当移动终端调试完毕，坑就出来了。

是的，没错，是你，ios。

1.当您点按“拷贝”时，屏幕底部的白色屏幕会抖动。仔细看，拉起键盘，立即放好

最好知道抖动是由什么引起的。由于键盘是上拉的，所以重点在输入栏，所以只要让输入栏无法操作，加上输入即可。将属性(' readonly '，' readonly ')添加到代码中；将此输入设为只读，您就不会拉起键盘。

2.无法复制

问题是input.select()没有选择ios中的所有内容，所以我们需要用另一种方法来选择内容，那就是input。setselectionRange (0，输入。价值。长度)；

完整的代码如下：

const BTN=document . query selector(' # BTN ')；btn.addEventListener('click '，()={ const input=document . createelement(' input ')；input.setAttribute('readonly '，' readonly ')；input.setAttribute('value '，' hello world ')；document.body.appendChild(输入)；input.setSelectionRange(0，9999)；if(document . exec command(' copy '){ document . exec command(' copy ')；Console.log(“复制成功”)；} document.body.removeChild(输入)；})摘要

上面是关于JavaScript如何将内容复制到剪贴板的，附带了几个链接：

execCommand MDN

ExecCommand兼容性

剪贴板. js