Mobile terminal implements selected and highlighted all-selected text events

This time I will bring you the event of selecting and highlighting all selected text on the mobile terminal. What are the precautions on implementing the event of selecting and highlighting all selected text on the mobile terminal. The following is a practical case, let's take a look.

Recently, we need to implement a copy function on the page for HTML5 WebAPP: when the user clicks and long-presses the text, all the text will be selected and the system "Copy" menu will pop up. The user can click "Copy" to perform the copy operation, and then paste it into Search the AppStore for the corresponding application. The reason why the link form is not used to jump directly to the corresponding AppStore application is to increase the weight of the promoted enterprise App through the user's active input of keyword searches. Therefore, this "copy" function is crucial to the user experience.

I tried some methods, but the compatibility on the Android/iOS platform is not very good. In the WeChat browser, it is easy to long-press text to activate the system menu and highlight all selected text content. But the performance in other browsers is not very consistent. Including simulating focus input, JavaScript Selection, and using the a tag to try to activate the system menu. These methods all have compatibility flaws.

1) Although using the a tag with href attribute and long pressing the text on uc browser and Baidu browser, the "free copy"/"select text" menu will appear. After selecting this menu, the "full text" will appear. "Select/Copy" menu, but in the system browsers of some Android phones and iPhones, it is regarded as a pure link, and only "Copy Link" pops up without the "Copy Text" menu. Moreover, even if only a small number of browsers are considered feasible, this will add one more step to the user's operation and increase complexity. So this solution is not advisable.

2) Using selection and range methods, you need to consider the compatibility of different browsers. The code is as follows:

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");  
  }  
}

Unfortunately, it is still not possible to highlight by clicking or long pressing on iPhone Safari Select all text (since window.getSelection is also supported, why can’t the text be selected by default after the addRange operation in Safari browser? If you know the reason, please leave a message). Therefore, this approach is flawed. The method of actively selecting a text area is attached later.

3) iPhone users may know that if you long press the blank area around the text in a text selection, Safari will automatically highlight and select all the text in the selection (the target text needs to be placed in an independent p block-level container ). According to this feature, use CSS margin to modify it. Using this feature, you can solve the incompatibility of the second method above on iOS devices. After testing, regardless of the Android and iOS platforms, the system browsers that come with general mobile phones are compatible. As for mobile products from other manufacturers such as UC Browser and Baidu Browser, due to different mechanisms, you can only use the "free copy" function provided by these browser menus.

So, I combined the second and third methods and used the taphold event in jQuery mobile to simulate the longtap operation to trigger the copy menu of the mobile system. This can basically be done on all mobile device browsers. You can long press the text area to highlight all text content. One more thing, taphold's compatibility bugs are not detailed here with solutions. If your project requires excellence, you can search for solutions yourself.

My solution is listed below. The specific code is as follows:

HTML code:

<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 code:

 <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>

Key CSS code:

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;  
}

Description: The margin here: 2em is correct In order to realize the long-press selection all function on Safari browser, in order to respect the effect of restoring the design draft, the parent container .cparea uses negative margins to offset the 2em margin. In the end, not only was it visually consistent with the design drawing, but it also enabled long-pressing to select all to activate the system menu.

Finally, let me add the complete method to support 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);   
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of date-related functions in JS

Detailed explanation of the use of foldable panels in JS

The above is the detailed content of Mobile terminal implements selected and highlighted all-selected text events. For more information, please follow other related articles on the PHP Chinese website!