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/

巴特西

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

以上方法可能不兼容IOS，不过下面这种方法简直酷毙了~~

最新文章

热门文章