JavaScript复制内容到剪贴板的两种常用方法

点我复制

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');

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);
});

点我复制

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() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 、 这样的输入域以外，是无法使用这个方法的。</p><p>这时候我们需要曲线救国。</p><blockquote><p><button id="btn">点我复制</button></p></blockquote><p>js代码</p><div><pre>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); })</pre></div><p>算是曲线救国成功了吧。在使用这个方法时，遇到了几个坑。</p><p><strong>遇到的坑</strong></p><p>在Chrome下调试的时候，这个方法时完美运行的。然后到了移动端调试的时候，坑就出来了。</p><p>对，没错，就是你，ios。。。</p><p><strong>1、点击复制时屏幕下方会出现白屏抖动，仔细看是拉起键盘又瞬间收起</strong></p><p>知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘，那就是聚焦到了输入域，那只要让输入域不可输入就好了，在代码中添加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的，就不会拉起键盘了。</p><p><strong>2、无法复制</strong></p><p>这个问题是由于 input.select() 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 input.setSelectionRange(0, input.value.length);。</p><p>完整代码如下：</p><div><pre>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); })</pre></div><p><strong>总结</strong></p><p>以上就是关于JavaScript如何实现复制内容到剪贴板，附上几个链接：</p><p>execCommand MDN</p><p>execCommand兼容性</p><p>clipboard.js</p> <br> 网页名称：JavaScript复制内容到剪贴板的两种常用方法 <br> 标题网址：<a href="http://6mz.cn/article/ijcish.html">http://6mz.cn/article/ijcish.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/ehhcoe.html">网络优化需要学什么,定点网络优化有什么用</a> </li><li> <a href="/article/ehhceo.html">服务器的“进化”之路服务器发展的几个时代</a> </li><li> <a href="/article/ehhcss.html">百度SEO发帖推广,百度seo发帖推广怎么做</a> </li><li> <a href="/article/ehhccj.html">大连哪个公司做网站开发的，大连做网站哪家公司做的好知道的推荐一下谢谢</a> </li><li> <a href="/article/ehhcsi.html">如何做企业网站，如何制作一个企业网站</a> </li> </ul> </div> </div> <footer> <div class="message"> <div class="mess container"> <p>免费获取网站建设与品牌策划方案报价</p> <span>*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。</span> <form action=""> <input type="text" class="ipt1" placeholder="联系人"> <input type="text" class="ipt2" placeholder="联系电话"> <textarea name="" id="" placeholder="内容描述：描述您的需求，如网站、微信、电商、APP等。"> 提交需求