clipboard.js操做剪貼版——一些移動端交互和兼容經驗

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

庫，真的是個好庫，並且不依賴flash，幾乎完美支持移動端。可是，移動端應用有些不趟不知的小tip，這裏歸檔下。

原理

沒啥複雜的，基本就是建立一個input，文本塞進去，所有選中，而後document.execCommand("Copy")，Duang，就複製到剪貼板了。

最開始不想用庫，這麼簡單的原理，本身寫個嘛，以下:

  /**
   * 一鍵複製到剪切板
   * @return {[bl]} [不支持的瀏覽器或者異常都報false]
   */
  copy2clipboard(s) {
    try {
      let ipt = document.createElement("input");
      ipt.style.cssText = 'opacity:0;position:fixed;top:0;';
      ipt.value = s;
      document.body.appendChild(ipt);
      ipt.select();
      setTimeout(function() {
        ipt.remove();
      });
      return document.execCommand("Copy");
    } catch (err) {
      return false;
    }
  }

然而，鍵盤嗖嗖的彈，即便我加了input.remove()，也依然阻止不了鍵盤的一閃而過。

好吧，用你的庫好了。

沒仔細研究，大概用了些readonly、attribute之類的奇技淫巧，反正核心都是同樣的，搞個能夠不讓鍵盤彈出來的文字，select()而後execCommand("Copy")。

clipboard.js經驗技巧

他支持了好幾種調用方式，可是，只有一種是Android/iOS都能支持，且不會彈出鍵盤的。（有時候有的設備上，你仍是能看到一閃而過的選區，不過這個不重要...）

即官方文檔中的「Copy text from attribute」。以下:

<button class="btn" data-clipboard-text="text to clipboard"></button>
<script>
var clipboard = new ClipboardJS('.btn');
</script>

注：我沒記錯的話，須要在DOM Ready的時候，調用new ClipboardJS()，他貌似沒走什麼代理模式。

一些兼容問題

目前，只遇到過一個問題，就是小米系統瀏覽器寫入剪貼板失敗。其餘手機其餘瀏覽器都沒毛病。

弔詭的是，clipboard的on success事件都觸發了，事件裏的e.action/e.text也都能拿到，可是就是剪貼板裏就是找不到。

排查了3個小時，最原始的排除大法，總算de到了bug。

*{
margin: 0;
padding: 0;
- user-select: none;
+ // user-select: none;
box-sizing: border-box;
}

以上，就是這句 「 user-select: none; 」，reset.css裏寫了一句對全部元素，禁止用戶選中的樣式。

duang，小米瀏覽器認真的執行了這條指令，因而，clipboard.js經過選中+複製作剪切板寫入時，就遭到了拒絕。（確切說是遭到了欺騙）

 

over。

注：user-select: none; 這句是顯然不適合加到全局樣式裏的，按需引入就好。 

 

後續，終極大招

2018.11.20

測試同窗發現了新問題，ios 微信中，上述推薦方案失效了，剪切板寫入失敗。

不知道微信升級改了什麼鬼東西，繼續嘗試官方文檔提供的其餘方案。最佳實現以下：

官方文檔 - Advanced Options - "If you want to dynamically set a text, you'll return a String."

new ClipboardJS('.btn', {
    text: function(trigger) {
        return 'some text';
    }
});

 

over.