## 前言 今天來談談一個小小的需求： 產品：說給我這個添加一個復制功能，點一下把內容給我復制到粘貼板上。 我：好嘞 我：說上就上，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.做事謹慎、謹慎、謹慎，重要得事情要說三次。