小編給大家分享一下web開發(fā)中移動端怎么弄選中實現高亮全選文本事件，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站建設、成都網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的加格達奇網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

最近需要給HTML5的WebAPP在頁面上實現一個復制功能：用戶點擊長按文本會全選文字并彈出系統“復制”菜單，用戶可以點擊“復制”進行復制操作，然后粘貼到AppStore搜索對應的應用。之所以不是采用鏈接形式直接跳轉到AppStore對應應用是為了通過用戶的主動輸入關鍵詞搜索給推廣的企業(yè)App增加權重。所以這一個“復制”功能對用戶的體驗至關重要。

嘗試了一些做法，在安卓/iOS平臺上的兼容性都不是很好。在微信瀏覽器內是很容易實現長按文本激發(fā)系統菜單，高亮全選文本內容的。但是在其他瀏覽器的表現就不是很一致了。包括模擬focus input，JavaScript Selection, 使用a標簽嘗試激活系統菜單。這些方法都存在兼容的缺陷。

1）雖然使用帶有href屬性的a標簽在uc瀏覽器和百度瀏覽器上長按文本會出現“自由復制”/“選擇文本”菜單，選擇該菜單后會出現“全選/復制”的菜單，但是在一些安卓手機的系統瀏覽器和iPhone中卻被視為純鏈接，只彈出“復制鏈接”，沒有“復制文本”菜單。況且即使只考慮少部分瀏覽器可行，這樣也給用戶操作多了一步，增加了復雜度。所以該方案不可取。

2）借助selection和range的方法需要考慮到不同瀏覽器的兼容性，代碼如下：

function selectText(element) {  
  var doc = document,  
      text = docgetElementById(element),  
      range,  
      selection;  
  
  if (docbodycreateTextRange) {  
      range = documentbodycreateTextRange();  
      rangemoveToElementText(text);  
      rangeselect();  
  } else if (windowgetSelection) {  
      selection = windowgetSelection();          
      range = documentcreateRange();  
      rangeselectNodeContents(text);  
      selectionremoveAllRanges();  
      selectionaddRange(range);  
      /*if(selectionsetBaseAndExtent){ 
          selectionsetBaseAndExtent(text, 0, text, 1); 
      }*/  
  }else{  
      alert("none");  
  }  
}

遺憾的是在iphone Safari上依然無法通過點擊或長按高亮選中所有文本（既然也支持window.getSelection，為何在Safari瀏覽器addRange操作后文本不能默認選中，知道原因的請留言指教）。因此，該方式存在缺陷。主動選中文本區(qū)域的方法后面后附上。

3）iPhone用戶可能知道，長按某一文本選區(qū)內文字周圍的空白區(qū)域，Safari會自動將該選區(qū)內的文本高亮全選（目標文本需要放在獨立的p塊級容器內）。根據這一特性，用CSS margin修飾一下，利用這個特點，正好可以解決上述第二種方法在ios設備的不兼容。經過測試，無論安卓和ios平臺，一般手機自帶的系統瀏覽器都是可以兼容的。至于uc瀏覽器、百度瀏覽器等其他廠家的移動端產品，由于有不同的機制，只能使用這些瀏覽器菜單提供的“自由復制”功能。

所以，我綜合了第二種和第三種方式，使用jQuery mobile中的taphold事件來模擬longtap操作激發(fā)手機系統的復制菜單，這樣基本上可以做到在所有移動設備瀏覽器上都能實現長按文本區(qū)域來高亮選中所有文本內容。再提一句，taphold的兼容bug這里就不詳細附解決方法了，如果你的項目要求精益求精，你可以自行搜索解決方案。

下面列出我的解決方案。具體代碼如下：

HTML代碼：

  
    
  
        1、必須首次下載才生效
  
        2、不能從排行榜下載哦  
    
  
    
  
        
三國艷義手機優(yōu)化大師
                   
    
  
    
  
        ★長按虛線框,拷貝關鍵詞  
    
  
    去AppStore搜索下載  

JavaScript代碼：

關鍵的CSS代碼：

cparea{  
    text-align: center;  
    font-family: Microsoft Yahei;  
    margin: -2em 0 0;  
}  
kwd{  
    display: inline-block;  
    color: #272727;  
    background-color: #fff;  
    font-size: 1875em;  
    font-size: 1875em;  
    padding: 75em 1em;  
    border: 1px dashed #e60012;  
    -webkit-user-select:element;   
    margin: 2em;  
}  
kwd span{  
    display: block;   
    border: 1px solid #fff;  
}  
kdes{  
    display: inline-block;  
    color: #212121;  
    font-size: 875em;  
    padding-top: 0;  
}  
kdes b{  
    color: #ed5353;  
    font-size: 25em;  
    padding-right: 1em;  
}

說明：這里的margin：2em正是為了實現Safari瀏覽器上的長按全選功能，為了尊重還原設計稿效果，父容器.cparea又使用了負邊距來抵消這個2em的外邊距。最終，不僅視覺上和設計圖保持了一致，也實現了長按全選激發(fā)系統菜單。

最后再補充一下支持Safari下的完整方法：

$("#kwd").bind("taphold", function(){  
    var doc = document,   
        text = docgetElementById("kwd"),  
        range,   
        selection;  
    if (docbodycreateTextRange) { //IE  
        range = documentbodycreateTextRange();  
        rangemoveToElementText(text);  
        rangeselect();  
  
    } else if (windowgetSelection) {   //FF CH SF  
        selection = windowgetSelection();          
        range = documentcreateRange();  
        rangeselectNodeContents(text);  
        selectionremoveAllRanges();  
        selectionaddRange(range);  
  
        //測試  
        consolelog(texttextContent);  
        textinnerText && consolelog(textinnerText);  //FireFox不支持innerText  
        consolelog(texttextContentlength);  
        textinnerText && consolelog(textinnerTextlength);   //在Chrome下長度比IE/FF下多1  
        consolelog(textfirstChildtextContentlength);  
        textinnerText && consolelog(textfirstChildinnerTextlength);  
        consolelog(textfirstChildinnerHTMLlength);  
  
        //注意IE9-不支持textContent  
        makeSelection(0, textfirstChildtextContentlength, 0, textfirstChild);  
        /* 
        if(selectionsetBaseAndExtent){ 
            selectionselectAllChildren(text); 
            selectionsetBaseAndExtent(text, 0, text, 4); 
        } 
        */  
    }else{  
        alert("瀏覽器不支持長按復制功能");  
    }  
  
});  
function makeSelection(start, end, child, parent) {  
    var range = documentcreateRange();  
    //consolelog(parentchildNodes[child]);  
    rangesetStart(parentchildNodes[child], start);  
    rangesetEnd(parentchildNodes[child], end);  
  
    var sel = windowgetSelection();  
    selremoveAllRanges();  
    seladdRange(range);   
}

看完了這篇文章，相信你對web開發(fā)中移動端怎么弄選中實現高亮全選文本事件有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道，感謝各位的閱讀！