1. 程式人生 > >用js實現點選複製文字

用js實現點選複製文字

 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,都是原生的。

/**/