复制模板内容 · 我的文档

## 前言今天来谈谈一个小小的需求：产品：说给我这个添加一个复制功能，点一下把内容给我复制到粘贴板上。我：好嘞我：说上就上，5分钟搞定，部署上去看一下，美滋滋，又是一天 5分钟过去了... 测试：测试通过，可以了产品：复制提示成功了，但是没有在粘贴板上呢！！！我和测试：蒙蔽了，咋会呢产品：我的是苹果电脑我和测试：靠，产品这么豪吗？都没想BUG，一心想着，自己那破电脑... 我：没办法了，只能看一下什么问题了... 我：又是5分钟过去了，发现：input自带的select()方法在苹果端无法进行选择，问题找出了，那就干吧。 ... ### 先看看我5分钟CV出来的代码 ``` js // 点击复制到剪贴板函数 copyToClipboard(content) { if (window.clipboardData) { window.clipboardData.setData('text', content) } else { (function(content) { document.oncopy = function(e) { e.clipboardData.setData('text', content) e.preventDefault() document.oncopy = null } })(content) document.execCommand('Copy') } ``` * 注：ios下不能执行document.execCommand('copy') 在ios设备下`alert(document.execCommand('copy'))`一直返回`false` 查阅相关资料发现ios下input不支持`input.select();` * 其他兼容问题： input 输入框不能`hidden`或者`display: none`; 如果需要隐藏输入框可以使用定位脱离文档流，然后移除屏幕 ### 解决input自带的select()方法在苹果端无法进行选择直接上完整代码，看着就比较简单了 ``` js copyText(text) { const textString = text.toString() // 数字没有 .length 不能执行selectText 需要转化成字符串 let input = document.querySelector('#copy-input') if (!input) { input = document.createElement('input') input.id = 'copy-input' input.readOnly = 'readOnly' // 防止ios聚焦触发键盘事件 input.style.position = 'absolute' input.style.left = '-2000px' input.style.zIndex = '-2000' document.body.appendChild(input) } input.value = textString // ios必须先选中文字且不支持 input.select(); this.selectText(input, 0, textString.length) if (document.execCommand('copy')) { document.execCommand('copy') this.$message.success('复制成功！') } else { this.$message.success('复制失败！') } input.blur() } ``` ### input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法 ``` js // 选择文本。createTextRange(setSelectionRange)是input方法 selectText(textbox, startIndex, stopIndex) { if (textbox.createTextRange) { // ie const range = textbox.createTextRange() range.collapse(true) range.moveStart('character', startIndex) // 起始光标 range.moveEnd('character', stopIndex - startIndex) // 结束光标 range.select() // 不兼容苹果 } else { // firefox/chrome textbox.setSelectionRange(startIndex, stopIndex) textbox.focus() } } ``` ## 兼容性补充：必须手动触发点击事件或者其他事件，不能直接使用js调用！！！ copyText('h5实现一键复制到粘贴板兼容ios') * 移动端：安卓手机：微信（chrome）和几个手机浏览器都可以用；苹果手机：微信里面和sarafi浏览器里也都可以； * PC: sarafi版本必须在10.2以上，其他浏览器可以。 ## 总结 1.坑都是一步步填过来的，不要把没做过作为理由，犯了就改，这就是经验了，虽然表面上不是什么大问题，但是小心总是好的； 2.做事情需要考虑全面，不要让“所谓得小事”而不放在心上，小事如果多了，性质就不一样了 3.做事谨慎、谨慎、谨慎，重要得事情要说三次。