clipboard.js操作剪贴版——一些移动端交互和兼容经验

时间：2024-01-21 18:27:19

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.

 

相关文章