用js實現點選複製文字
阿新 • • 發佈:2019-01-08
function copyText(ele){ //複製文字 需要在文件中新增一個複製用的input var copyDOM = ele; //要複製文字的節點 var range = document.createRange(); //建立一個range window.getSelection().removeAllRanges(); //清楚頁面中已有的selection range.selectNode(copyDOM); // 選中需要複製的節點 window.getSelection().addRange(range); // 執行選中元素 var successful = document.execCommand('copy'); // 執行 copy 操作 if(successful){ layer.msg('複製成功,如失敗請手動複製!',{time: 2000}); }else{ layer.msg('複製失敗,請手動複製!',{time: 2000}); } // 移除選中的元素 window.getSelection().removeAllRanges(); }
對於這段程式碼的相容性,實際使用中對於大多的普通瀏覽器和android端都是比較相容的,但移動端UC和qq瀏覽器有一個小問題,原因是因為UC中document.execCommand('copy')在成功執行後沒有返回值,對此情況實際使用中可以僅測試document.execCommand是否為function就行了,不用考慮執行後的返回值,預設複製成功。
程式碼的主要邏輯就是 選中文字->執行復制。
使用到的三個比較關鍵的點就是 range,selection,和execCommend,對於這三者的具體功能可以百度或檢視mdn,都是原生的。
/**/