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微信浏览器，查了不少的代码才发现这个，因此记录一下，后面的人若是需求同样就不用走弯路了。