最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。
常见方法
查了一下万能的Google，现在常见的方法主要是以下两种：
第三方库：clipboard.js
原生方法：document.execCommand()
分别来看看这两种方法是如何使用的。
立即学习“Java免费学习笔记（深入）”；
clipboard.js
这是clipboard的官网：https://clipboardjs.com/，看起来就是这么的简单。
引用
直接引用：
包： npm install clipboard –save ，然后 import Clipboard from ‘clipboard’;
使用
从输入框复制
现在页面上有一个 标签，我们需要复制其中的内容，我们可以这样做：
登录后复制
import Clipboard from 'clipboard';const btnCopy = new Clipboard('btn');
登录后复制
注意到，在
直接复制
有的时候，我们并不希望从 中复制内容，仅仅是直接从变量中取值。如果在 Vue 中我们可以这样做：
登录后复制
import Clipboard from 'clipboard';const btnCopy = new Clipboard('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); // 触发元素：比如： e.clearSelection(); // 清除选中内容});// 复制失败后执行的回调函数clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});
登录后复制
小结
文档中还提到，如果在单页面中使用 clipboard ，为了使得生命周期管理更加的优雅，在使用完之后记得 btn.destroy() 销毁一下。
clipboard 使用起来是不是很简单。但是，就为了一个 copy 功能就使用额外的第三方库是不是不够优雅，这时候该怎么办？那就用原生方法实现呗。
document.execCommand()方法
先看看这个方法在 MDN 上是怎么定义的：
which allows one to run commands to manipulate the contents of the editable region.
意思就是可以允许运行命令来操作可编辑区域的内容，注意，是可编辑区域。
定义
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
方法返回一个 Boolean 值，表示操作是否成功。
aCommandName ：表示命令名称，比如： copy, cut 等（更多命令见命令）；
aShowDefaultUI：是否展示用户界面，一般情况下都是 false；
aValueArgument：有些命令需要额外的参数，一般用不到；
兼容性
这个方法在之前的兼容性其实是不太好的，但是好在现在已经基本兼容所有主流浏览器了，在移动端也可以使用。
使用
从输入框复制
现在页面上有一个 标签，我们想要复制其中的内容，我们可以这样做：
登录后复制
const btn = document.querySelector('#btn');btn.addEventListener('click', () => { const input = document.querySelector('#demoInput'); input.select(); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('复制成功'); }})
登录后复制
其它地方复制
有的时候页面上并没有 标签，我们可能需要从一个
中复制内容，或者直接复制变量。
还记得在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 、
这时候我们需要曲线救国。
登录后复制
const btn = document.querySelector('#btn');btn.addEventListener('click',() => { const input = document.createElement('input'); document.body.appendChild(input); input.setAttribute('value', '听说你想复制我'); input.select(); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('复制成功'); } document.body.removeChild(input);})
登录后复制
算是曲线救国成功了吧。在使用这个方法时，遇到了几个坑。
遇到的坑
在Chrome下调试的时候，这个方法时完美运行的。然后到了移动端调试的时候，坑就出来了。
对，没错，就是你，ios。。。
点击复制时屏幕下方会出现白屏抖动，仔细看是拉起键盘又瞬间收起
知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘，那就是聚焦到了输入域，那只要让输入域不可输入就好了，在代码中添加 input.setAttribute(‘readonly’, ‘readonly’); 使这个 是只读的，就不会拉起键盘了。
无法复制
这个问题是由于 input.select() 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 input.setSelectionRange(0, input.value.length);。
完整代码如下：
const btn = document.querySelector('#btn');btn.addEventListener('click',() => { const input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); input.setAttribute('value', 'hello world'); document.body.appendChild(input); input.setSelectionRange(0, 9999); if (document.execCommand('copy')) { document.execCommand('copy'); console.log('复制成功'); } document.body.removeChild(input);})
登录后复制
相关推荐：
JS复制内容到剪切板的实例代码(兼容IE与火狐)_javascript技巧
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板_jquery
JavaScript实现复制内容到粘贴板代码_javascript技巧
以上就是JavaScript复制内容到剪贴板实现代码的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2785607.html
