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.