JS--微信瀏覽器複製到剪貼板實現

因爲太忙好久沒寫博客了，若有錯誤遺漏，請指出，感謝！

首先這裏要注意，是微信瀏覽器下的解決方案，其餘瀏覽器請自行測試。

先說複製到剪貼板主要有什麼使用場景：

• 優惠券優惠碼，須要用戶複製
• 淘寶商品，須要複製淘口令

因爲淘寶連接沒法在微信中打開，因此淘寶開發了淘口令方便物質傳播，而導購網站在微信推廣的時候也是生成口令，用戶只須要複製口令，打開手機淘寶，便可看到對應的商品：

 

這裏要使用的是一個很是強大的工具Clipboardjs，這個工具只須要引入對應的js，便可方便的完成上面的功能。

引入js，這裏我把js放在了服務器，經過url請求訪問便可，官網方法是下載對應的js文件。

頁面代碼：

<div class="test-area">
    <input id="taokouling" value="{{code}}" type="text">
    <button id="copyCode" class="btn" data-clipboard-target="#taokouling" data-clipboard-action="copy">
        複製淘口令
    </button>
    <script type="text/javascript" src="http://www.fndroid.cn/clipboard.min.js"></script>
    <script>
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e){
            console.log(e);
            document.getElementById('copyCode').innerHTML = '複製成功';
        });
        clipboard.on('error', function(e){
            document.getElementById('copyCode').innerHTML = '複製失敗，請長按複製';
        });
    </script>
</div>

雖然這個代碼很簡單，可是卻能兼容當前版本的iOS和Android微信瀏覽器，查了不少的代碼才發現這個，因此記錄一下，後面的人若是需求同樣就不用走彎路了。