首頁 > 文章 > web前端 > 行動端實作選取實現高亮全選文字事件

行動端實作選取實現高亮全選文字事件

php中世界最好的语言原創: 2018-03-26 11:44:395022瀏覽

這次帶給大家行動端實作選取實現高亮全選文字事件，行動端實作選取實現高亮全選文字事件的注意事項有哪些，以下就是實戰案例，一起來看一下。

最近需要給HTML5的WebAPP在頁面上實現一個複製功能：使用者點擊長按文字會全選文字並彈出系統「複製」選單，使用者可以點擊「複製」進行複製操作，然後貼上到AppStore搜尋對應的應用程式。之所以不是採用連結形式直接跳到AppStore對應應用程式是為了透過使用者的主動輸入關鍵字搜尋為推廣的企業App增加權重。所以這個「複製」功能對使用者的體驗至關重要。

嘗試了一些做法，在安卓/iOS平台上的相容性都不是很好。在微信瀏覽器內是很容易實現長按文字激發系統選單，高亮全選文字內容的。但是在其他瀏覽器的表現就不是很一致了。包括模擬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操作後文字不能預設選中，知道原因的請留言指教）。因此，該方式有缺陷。主動選取文字區域的方法後面後附上。

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

所以，我綜合了第二種和第三種方式，使用jQuery mobile中的taphold事件來模擬longtap操作激發手機系統的複製選單，這樣基本上可以做到在所有行動裝置瀏覽器上都能實現長按文字區域來高亮選取所有文字內容。再提一句，taphold的兼容bug這裡就不詳細附解決方法了，如果你的專案要求精益求精，你可以自行搜尋解決方案。

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

HTML程式碼：

<p class=" para requirement">  
    <p class="tips tips-t">  
        1、必须首次下载才生效<br/>  
        2、不能从排行榜下载哦  
    </p>  
    <p class="cparea">  
        <p class="kwd" id="kwd"><span>三国艳义手机优化大师</span></p>                   
    </p>  
    <p class="cparea">  
        <span class="kdes"><b>★</b>长按虚线框,拷贝关键词</span>  
    </p>  
    <a href="https://itunesapplecom/cn/" data-role="button" class="downlink">去AppStore搜索下载</a>  
</p>

JavaScript程式碼：

 <script type="text/javascript">  
  
$("#kwd")bind("taphold", function(){ //不支持iPhone/iTouch/iPad Safari  
    var doc = document,   
        text = docgetElementById("kwd"),  
        range,   
        selection;  
    if (docbodycreateTextRange) {  
        range = documentbodycreateTextRange();  
        rangemoveToElementText(text);  
        rangeselect();  
    } else if (windowgetSelection) {  
        selection = windowgetSelection();          
        range = documentcreateRange();  
        rangeselectNodeContents(text);  
        selectionremoveAllRanges();  
        selectionaddRange(range);   
    }else{  
        alert("浏览器不支持长按复制功能");  
    }         
});  
  
</script>

關鍵的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的外邊距。最終，不僅視覺上和設計圖保持了一致，也實現了長按全選激發系統選單。

最後再補充一下支持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);   
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！