最近的一个活动页面有一个小需求。用户可以通过点击或长按的方式将内容复制到剪贴板，并记录实现过程和遇到的坑。有需要的朋友可以参考一下。
常见方法
查了一下万能的谷歌，常用的方法如下：
第三方库：clipboard.js
本机方法：document.execCommand()
我们来看看这两种方法是如何分别使用的。
clipboard.js
这是剪贴板的官方网站：https://clipboardjs.com/.它看起来很简单。
引用
直接引用：
script src=' dist/clipboard . min . js '/script
包：npm安装剪贴板-保存，然后从“剪贴板”导入剪贴板；
使用
从输入框复制
现在页面上有一个输入标签，我们需要复制内容。我们可以这样做：
输入id='demoInput '值='hello world '
Button class=' BTN '数据-剪贴板-target=' # demoinput '单击我来复制/button
从“剪贴板”导入剪贴板；
const btnCopy=新剪贴板(' BTN ')；
注意，按钮标记中添加了一个data-clipboard-target属性，它的值是需要复制的输入的id。顾名思义，它从整个标签中复制内容。
直接复制
有时，我们不想从输入中复制内容，而是直接从变量中取值。如果我们能在Vue中做到这一点：
button class=' BTN ':data-clipboard-text=' copy value '单击我来复制/button
从“剪贴板”导入剪贴板；
const btnCopy=新剪贴板(' BTN ')；
this.copyValue=' hello world
事件
有时候我们需要在复制之后做一些事情，然后需要回调函数的支持。
将以下代码添加到处理函数中：
//复制成功后执行的回调函数
clipboard.on('成功'，函数(e) {
console.info('Action:'，e . Action)；//动作的名称，例如：动作：复制
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.error('Action:'，e . Action)；
console.error('Trigger:'，e . Trigger)；
});
小结
文档中还提到，如果在单个页面中使用clipboard，为了让生命周期管理更加优雅，使用后记得销毁btn.destroy()。
剪贴板好用吗？然而，仅仅为了一个复制功能而使用额外的第三方库是否不够优雅？这时候我该怎么办？然后用原生的方法来实现。
document.execCommand()方法
让我们先看看这个方法是如何在MDN上定义的：
它允许用户运行命令来操作可编辑区域的内容。
意味着可以允许命令操作可编辑区域的内容。请注意，这是可编辑区域。
定义
bool=document . exec command(aCommandName，aShowDefaultUI，aValueArgument)
该方法返回一个布尔值，指示操作是否成功。
AcoandName:表示命令名，如：copy、cut等。(更多命令见命令)；
AShowDefaultUI:是否显示用户界面通常为false；
AValueArgument:有些命令需要额外的参数，一般不使用；
兼容性
其实之前这种方式的兼容性并不是很好，不过好在现在基本兼容所有主流浏览器，在移动端也可以使用。
使用
从输入框复制
现在页面上有一个输入标签，我们想要复制它的内容。我们可以这样做：
输入id='demoInput '值='hello world '
按钮id='btn '点I复制/按钮
javascript，javascript
const BTN=document . query selector(' # BTN ')；
btn.addEventListener('click '，()={
const input=document . query selector(# demo input))；
input . select()；
if(document . exec command(' copy '){
document . exec command(' copy ')；
Console.log('复制成功')；
}
})
其它地方复制
有时候页面上没有输入标签，所以我们可能需要从一个div中复制内容或者直接复制变量。
我还记得在execCommand()方法的定义中提到，它只能操作可编辑区域，也就是说除了input、textarea等输入字段外，不能使用这个方法。
这时候就需要曲线救国了。
按钮id='btn '点I复制/按钮
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、点击复制时屏幕下方会出现白屏抖动，仔细看是拉起键盘又瞬间收起
最好知道是什么导致了抖动。由于键盘是拉起来的，焦点在输入域，所以只要把输入域设为非输入，在代码中添加input.setAttribute ('readonly '，' readonly ')；把这个输入设为只读，就不会拉起键盘了。
2、无法复制
这个问题是因为input.select()没有选择ios下的所有内容。我们需要使用另一种方法来选择内容。此方法为input.setSelectionRange (0，input . value . length)；
完整的代码如下：
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
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。