<lable>
<input type="text" id="txt">
<a href="javascript:;" id="copy">
</lable>
document.getElementById('copy').onclick = function() {
var text = document.getElementById("txt");
text.select(); // 选中文本
document.execCommand("copy"); // 执行浏览器复制命令
}
JavaScript提供了select()方法来选中文本
JavaScript提供了execCommand("copy")方法执行浏览器的复制命令
以上方法可能不兼容IOS,不过下面这种方法简直酷毙了~~
引入
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
给要复制的元素设置id,给点击的元素设置data-clipboard-target属性指向要复制的元素id,也可设置data-clipboard-action="cut"选择是复制还是剪切(注:这个属性只在input和textarea上生效)
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
document.getElementById('foo').blur()
});
js中只需要调用ClipboardJS这个构造函数,传入要点击的元素即可
on方法传入success即为复制成功执行的代码块。
具体详情,请查看官网http://www.clipboardjs.cn/