JavaScript实现点击复制按钮复制文本框的内容，兼容IOS

<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/