HTML5 完美解決javascript中iphone手機和android手機複製文字到剪下板問題
阿新 • • 發佈:2018-12-25
1.執行以下解決方案條件:(這個是原理)
①執行復制方法時 所複製文字不能被任何 塊級元素和行內塊元素和行內元素遮蓋否則無效;(解決方案:將文字通過絕對定位或其他方式移除螢幕外)
②ios中不能複製屬性值,只能複製文字元素節點;(解決方案:可以把文字顏色設成背景色就能達到隱藏看不見的效果不影響顯示);
直接上程式碼:以下是虛擬碼
js程式碼:
function img() { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//區分iPhone裝置 window.getSelection().removeAllRanges();//這段程式碼必須放在前面否則無效 var Url2=document.getElementById("biaoios");//要複製文字的節點 var range = document.createRange(); // 選中需要複製的節點 range.selectNode(Url2); // 執行選中元素 window.getSelection().addRange(range);// 執行 copy 操作 var successful = document.execCommand('copy'); // 移除選中的元素 window.getSelection().removeAllRanges(); }else{ var Url2=document.getElementById("biao1");//要複製文字的節點 Url2.select(); //選擇物件 document.execCommand("Copy"); // 執行瀏覽器複製命令 } }
html佈局:
<input readOnly="true" style="outline: none;border: 0px; color: rgba(0,0,0,0.0);position: absolute;left:-200px; background-color: transparent" id="biao1" value=""/> <div id="biaoios" style=";position: absolute;left:-200px; color: rgba(0,0,0,0);background-color: transparent" ></div>
新增要複製內容的例子:
$("#biao1").val("要複製的內容");//要複製的內容 document.getElementById("biaoios").innerHTML=要複製的內容+"";
原文:https://blog.csdn.net/u010853130/article/details/66971498