1. 程式人生 > >HTML5 完美解決javascript中iphone手機和android手機複製文字到剪下板問題

HTML5 完美解決javascript中iphone手機和android手機複製文字到剪下板問題

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