利用Clipboard.js在手機端實現一次複製，，任意地方粘貼

標籤：通過   文字   輕量   mobile   --   blog   方法   logs   代碼提示   

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，可以通過如下代碼提示使用者手動複製：

利用Clipboard.js在手機端實現一次複製，，任意地方粘貼