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.