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:;

padding:;

- 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.

巴特西

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

原理

clipboard.js经验技巧

一些兼容问题

后续，终极大招

最新文章

热门文章