利用Clipboard.js在手机端实现一次复制，，任意地方粘贴

Posted 2020-10-10

Clipboard.js为开发者提供了一个集成了实用的API的多功能轻量级javascript库，不依赖Flash。

• Clipboard.js官网： https://clipboardjs.com/
• Clipboard.js下载(zip方式)：https://github.com/zenorocha/clipboard.js/archive/master.zip
• Clipboard.js使用方法:

1. <script src="lib/clipboard.js-master/dist/clipboard.min.js"></script>

   先引入js包。

2. html

       <!-- Target -->
       <input id="foo"  value="http://www.968309.com/mobile.php">
   
       <!-- Trigger -->
       <button class="btn" data-clipboard-target="#foo">复制</button>

    

3. js

   //init
       var clipboard = new Clipboard(‘.btn‘);
       //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
       clipboard.on(‘success‘, function(e) {
           alert(‘复制成功!‘)
           e.clearSelection();
       });
       clipboard.on(‘error‘, function(e) {
           alert(‘请选择“拷贝”进行复制!‘)
       });

    

• 注意点：

1. 红色标注部分只支持input和textarea。其他都不支持！
2. Safari版本是10以上的，可以直接成功复制；如果是版本小于10，可以通过如下代码提示用户手动复制：