Detailed description of the compatibility solution for highlight and select all text content on the mobile html5 page,

Detailed description of the compatibility solution for highlight and select all text content on the mobile html5 page,

Recently, we need to implement a copy function for the HTML5 WebAPP on the page: After you click "Long press", all text is selected and the "copy" menu is displayed. You can click "copy" to copy the text, paste it to the AppStore to search for the corresponding application. Instead of directly redirecting to the App store in the form of a link, the App adds weight to the promoted enterprise App by actively entering keywords. Therefore, this "copy" function is crucial to the user experience.

I tried some practices and the compatibility on the android/iOS platform is not very good. In the browser, it is easy to activate the system menu by pressing text in a long way and highlight all the text content. However, the performance in other browsers is not very consistent. This includes simulating the focus input and JavaScript Selection, and using the tag to try to activate the system menu. These methods have compatibility defects.

1) Although the label with the href attribute is used to press the text on the uc browser and Baidu browser, the "free copy"/"select text" menu appears, after selecting this menu, the "select all/copy" menu appears. However, in some Android mobile phone system browsers and iPhones, the menu is regarded as a pure link. Only the "Copy link" is displayed ", the copy text menu does not exist. Besides, even if only a small number of browsers are considered to be feasible, this gives users more operations and increases complexity. Therefore, this solution is not advisable.

2) The selection and range methods must take into account 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, on iphone Safari, you still cannot click or press it to highlight all text (since Windows is also supported. getSelection: Why the text cannot be selected by default after the addRange operation in the Safari browser. If you know the reason, please leave a message ). Therefore, this method has a defect. The method for actively selecting the text area is attached with it.

3) iPhone users may know that long-pressed blank areas around the text in a text selection area, safari automatically highlights all the text in the selected area (the target text needs to be placed in an independent div block-level container ). Based on this feature, we can use CSS margin to modify it. This feature can solve the incompatibility of the second method on ios devices. After testing, Android and ios platforms are compatible with the system browsers that come with mobile phones. For mobile products of uc browser, Baidu browser, and other manufacturers, due to their different mechanisms, they can only use the "free copy" function provided by these browser menus.

Therefore, I integrated the second and third methods to use the taphold event in jQuery mobile to simulate the longtap operation to stimulate the copy menu of the mobile phone system, in this way, you can easily highlight and select all text content by pressing the text area on all mobile device browsers. In another sentence, the solution is not detailed here for the compatibility bug of taphold. If your project requires perfection, you can search for a solution by yourself.

My solutions are listed below. The Code is as follows:

HTML code:

<Div class = "para requirement"> <div class = "tips-t"> 1. It must be downloaded for the first time. <br/> 2. It cannot be downloaded from the ranking table. </ div> <div class = "cparea"> <div class = "kwd" id = "kwd"> <span> mobile optimization master of Three Kingdoms Yanyi </span> </div> </div> <div class = "cparea"> <span class = "kdes"> <B>★</B> press the dotted box to copy the keyword </span> </div> <a href = "https: // itunesapplecom/cn/"data-role =" button "class =" downlink "> Search and download from AppStore </a> </div>

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 ("the browser does not support the long-press copy function") ;}}); </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;  }  

Note: here the margin: 2em is designed to achieve the long-press-all function on the Safari browser, in order to respect the effect of restoring the design draft, the parent container. cparea uses a negative margin to offset the 2em margin. In the end, not only is the visual and design drawings consistent, but also enables the system menu to be fully selected by a long press.

Finally, let's add the complete method that supports 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); // test consolelog (texttextContent); textinnerText & consolelog (textinnerText ); // FireFox does not support innerText consolelog (texttextContentlength); textinnerText & consolelog (textinnerTextlength); // The length in Chrome is 1 more than that in IE/FF ); textinnerText & consolelog (optional); // note IE9-textContent makeSelection (0, optional, 0, textfirstChild) is not supported;/* if (selectionsetBaseAndExtent) {selectionselectAllChildren (text); selectionsetBaseAndExtent (text, 0, text, 4);} */} else {alert ("the browser does not support the long-press copy function ");}}); 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 );}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.