clipboard.js存在的問題

clipboard.js  是一個複製到剪貼板的庫。

github：https://github.com/zenorocha/clipboard.js

兼容性：IE9一下不支持。

再作微信端的項目接到了一個需求。點擊按鈕把指定的內容複製到剪貼板中。

剛開始用的是：document.execCommand("Copy"); 大部分的屬性只有IE支持。好比：貼貼。

想了想我只用複製並且用的是微信端。只要安卓和蘋果支持可以使用就能夠了。

<input type="text" id="contents" value="測試複製">
<a id="but" onclick="jsCopy()">點擊複製</a>

<script type="text/javascript">
    function jsCopy(){
      var e=document.getElementById("contents");//對象是contents
      e.select(); //選擇對象
      tag=document.execCommand("Copy","false",null); //執行瀏覽器複製命令
      if(tag){
        alert('複製內容成功');
      }
    }
</script>   

emmmmmmm。缺點就是：必需要一個input文本框才能使用。並且還不能display:none隱藏掉。必須opacity。

有點坑，先測試，安卓華爲：成功。蘋果5：失敗。

蘋果失敗了那就pass掉。

從網上找找有沒有庫。ZeroClipboard.js

這個庫經過加載一個 Flash 來實現的。這個我是拒絕的。不事後來測試了一下。安卓成功，蘋果失敗。（可能沒仔細研究）

再找：

Clipboard.js 。體積少，沒有引入亂七八糟的東西。我比較喜歡。

　<a id="but" >點擊複製</a>

<script type="text/javascript">
    var clipboard = new Clipboard('#but', {
    text: function() {    // 若是想從其它DOM元素內容複製。應該是target:function(){return: };
      return '測試複製';
    }
  });
  clipboard.on('success', function(e) {
    alert("複製成功");
  });

  clipboard.on('error', function(e) {
    alert("複製失敗");
  });
</script>

結構比較明確。new一個實例。而後調用方法。

再測試，安卓：成功。 蘋果：失敗。

why!!!!!

從網上找：

想讓蘋果支持這個功能。元素只能爲button標籤。其它均不成。

　<button id="but" >點擊複製</button>

<script type="text/javascript">
    var clipboard = new Clipboard('#but', {
    text: function() {    // 若是想從其它DOM元素內容複製。應該是target:function(){return: };
      return '測試複製';
    }
  });
  clipboard.on('success', function(e) {
    alert("複製成功");
  });

  clipboard.on('error', function(e) {
    alert("複製失敗");
  });
</script>

　成功！。