Clipboard.js 實現點擊複製

在開發過程中難免會遇到點擊分享的需求，這裏有兩種實現方式：
第一種： 通過原生js 的方法用（存在兼容性）：

document.execCommand( aCommandName, aShowDefaultUI, aValueArgument**)**
參數說明：
aCommandName
      命令的名稱：常用的爲”copy”,”cut”等；

注：”copy” 拷貝當前選中內容到剪貼板
        “cut”   剪貼當前選中的文字並複製到剪貼板
aShowDefaultUI
      是否展示用戶界面，一般爲 false；

 aValueArgument
      默認爲null;

返回值:Boolean 如果還是false 則表示還不能支持；

html ：

<input type="text" id="copyVal" readonly value="被複制內容" />
<button class="copyBtn" >點擊複製</button>

javascript：

var copyBtn = document.getElementsByClassName('copyBtn')[0];

    copyBtn.onclick = function(){
        var copyVal = document.getElementById("copyVal");
            copyVal.select();

        try{
            if(document.execCommand('copy', false, null)){
                //success info
                console.log("doSomething...");
            } else{
                //fail info
                console.log("doSomething...");
            }
        } catch(err){
            //fail info
            console.log("doSomething...");
        }
    }

具體兼容如下-pc 端瀏覽器：

移動端瀏覽器-安卓(微信瀏覽器可用)：

移動端瀏覽器-ios:
目前是不支持所有瀏覽器，包括微信瀏覽器；

第二種 使用clipboard.js 實現(個人推薦)：
它是一個不需要Flash,就能實現文本複製或者剪切到剪切板的輕量級插件；
具體實例：
可以使用cdn 或者直接下載 設置好引用路徑

<script type="text/javascript" src="./dist/clipboard.min.js"></script>  

html

<input type="text" id="copyVal" readonly value="被複制內容" />
<button class="copyBtn" >點擊複製</button>

javascript

        //實例化 ClipboardJS對象;
        var copyBtn = new ClipboardJS('.copyBtn');

        copyBtn.on("success",function(e){
            // 複製成功
            alert(e.text);
            e.clearSelection();
        });
        copyBtn.on("error",function(e){
            //複製失敗；
            console.log( e.action )
        });

這裏的ClipboardJS在實例化時， 如果報錯：clipboard is not defined

解決辦法就是如下：

new ClipboardJS(obj)

原因就是 Clipboard.JS版本是2.0及以上版本