Explain the compatible solution of highlighting all text content by long press on HTML5 page of mobile terminal in detail

Time:2021-2-22

Recently, we need to implement a copy function for HTML5’s webapp on the page: users click and long press the text to select all the text and pop up the system “copy” menu. Users can click “copy” to copy, and then paste it to the app store to search the corresponding application. The reason why we don’t jump to the corresponding app store directly in the form of links is to increase the weight of the promoted enterprise app through the user’s active input keyword search. So this “copy” function is very important to the user experience.

Some practices have been tried, and the compatibility on Android / IOS platform is not very good. In wechat browser, it is easy to activate the system menu by long pressing the text and highlight all the text content. But in other browsers, the performance is not very consistent. Including simulation of focus input, JavaScript selection, using a tag to try to activate the system menu. All of these methods are compatible.

1) Although using a tag with the attribute of a to press and hold the text on UC browser and Baidu browser will bring up the menu of “free copy / select text”, and the menu of “select all / copy” will appear after selecting the menu, it is regarded as a pure link in some Android system browsers and iPhones, and only “copy link” will pop up without “copy text” menu. Moreover, even if only a small number of browsers are considered feasible, it also gives users one more step and increases the complexity. Therefore, the scheme is not desirable.

2) With the help of selection and range, the compatibility of different browsers should be considered. 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 the iPhone Safari, you still can’t highlight all the text by clicking or long pressing window.getSelection , why the text cannot be selected by default after the safari browser addrange operation, if you know the reason, please leave a message). Therefore, this method has defects. The method of actively selecting the text area is attached.

3) IPhone users may know that by pressing and holding the blank area around the text in a text selection, Safari will automatically highlight all the text in that selection (the target text needs to be placed in a separate div block level container). According to this feature, modify it with CSS margin, which can solve the incompatibility of the second method in IOS devices. After testing, no matter Android and IOS platform, the system browser of general mobile phone is compatible. As for UC browser, baidu browser and other manufacturers’ mobile products, due to different mechanisms, they can only use the “free copy” function provided by these browser menus.

Therefore, I integrated the second and third methods, using the taphold event in jQuery mobile to simulate the longtap operation and activate the copy menu of the mobile phone system. In this way, we can basically achieve long press text area to highlight all text content on all mobile device browsers. If your project requires continuous improvement, you can search for solutions by yourself.

My solutions are listed below. The specific codes are as follows:

HTML code:

<div class=" para requirement">  
    <div class="tips tips-t">  
        1. It must be downloaded for the first time to take effect < br / >  
        2. Can't download from the leaderboard  
    </div>  
    <div class="cparea">  
        < div class = "KWD" id = "KWD" > < span > Three Kingdoms Yanyi mobile phone optimization master < / span > < / div >                   
    </div>  
    <div class="cparea">  
        < span class = "kdes" > < b > - < / b > long press the dotted box to copy keywords</span>  
    </div>  
    <a href=" https://itunesapplecom/cn/ "Data role =" button "class =" downlink "> go to the app store to search for downloads</a>  
</div>

Javascript code:

<script type="text/javascript">  
  
$("#kwd") bind ("taphold", function () {// iPhone / iTouch / iPad Safari is not supported  
    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 ("browser does not support 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: the margin: 2em here is just to realize the long press Select all function on safari browser. In order to respect the effect of restoring the design draft, the parent container. Cparea uses the negative margin to offset the outer margin of 2em. Finally, it not only keeps the visual consistency with the design drawing, but also realizes the long press all select excitation system menu.

Finally, add the complete method supporting 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);  
  
        //Testing  
        consolelog(texttextContent);  
        Textinnertext & & console (textinnertext); // Firefox does not support innerText  
        consolelog(texttextContentlength);  
        Textinnertext & console log (textinnertextlength); // the length in Chrome is 1 more than that in IE / FF  
        consolelog(textfirstChildtextContentlength);  
        textinnerText && consolelog(textfirstChildinnerTextlength);  
        consolelog(textfirstChildinnerHTMLlength);  
  
        //Note that IE9 does not support textcontent  
        makeSelection(0, textfirstChildtextContentlength, 0, textfirstChild);  
        /* 
        if(selectionsetBaseAndExtent){ 
            selectionselectAllChildren(text); 
            selectionsetBaseAndExtent(text, 0, text, 4); 
        } 
        */  
    }else{  
        Alert ("browser does not support 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 the whole content of this article, I hope to help you learn, and I hope you can support developer more.

Recommended Today

Rust and python: why rust can replace Python

In this guide, we compare the rust and python programming languages. We will discuss the applicable use cases in each case, review the advantages and disadvantages of using rust and python, and explain why rust might replace python. I will introduce the following: What is rust? What is Python? When to use rust When to […]