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微信瀏覽器，查了很多的代碼才發現這個，所以記錄一下，后面的人如果需求一樣就不用走彎路了。