Mobile HTML5 page Long Press to implement a compatible solution highlighting the full selection of text content

Recently need to give HTML5 's WebApp on the page to implement a replication function: the user click on the long press text will be selected all text and the system "copy" menu, the user can click "Copy" to copy the operation, and then paste into the AppStore search for the corresponding app. The reason is not to use the link to jump directly to the AppStore corresponding application is to use the user's active input keyword search to promote the enterprise app to increase the weight. So this "copy" feature is critical to the user's experience.

Try some practices that are not very well compatible on Android/ios platforms. In the browser is easy to implement long press text to fire the system menu, highlighting the full selection of text content. But in other browsers the performance is not very consistent. Includes analog focus Input,javascript Selection, using a tag to try to activate the system menu. There are compatibility flaws in these methods.

1) Although the use of a tag with the href attribute in the UC browser and Baidu browser Long press the text will appear "Free copy"/"Select Text" menu, select the menu will appear "all Select/Copy" menu, but in some Android phone system browser and iphone is considered a pure link, only Pop " Copy link ", there is no" copy text "menu. Moreover, even if only a small number of browsers are feasible, this also gives the user a step further, adding complexity. So the scheme is not advisable.

2) The selection and range methods need to take into account the compatibility of different browsers, the code is as follows:

function SelectText (Element) {  var doc = document,      text = Doc.getelementbyid (element),      range,      selection;  if (doc.body.createTextRange) {      range = Document.body.createTextRange ();      Range.movetoelementtext (text);      Range.Select ();  } else if (window.getselection) {      selection = Window.getselection ();              Range = Document.createrange ();      Range.selectnodecontents (text);      Selection.removeallranges ();      Selection.addrange (range);      /*if (selection.setbaseandextent) {          selection.setbaseandextent (text, 0, text, 1);      } *      /}else{alert ("None");}  }

Unfortunately on the iphone safari still can't click or long press highlight all text (since also support window.getselection, why in the Safari browser text can not be selected, know the reason of the message). Therefore, there is a flaw in this approach.

3) iphone users may know that by long pressing an empty area around the text in a text selection, Safari automatically highlights the text within that selection (the target text needs to be placed in a separate Div block level container). According to this feature, with CSS margin decoration, using this feature, just can solve the above-mentioned second method in the iOS device incompatibility. Tested, both Android and iOS platforms can be compatible with the system browser that comes with your phone. As for the mobile products of other manufacturers, such as UC Browser, Baidu browser and so on, due to different mechanisms, only the "Free copy" function provided by these browser menus can be used.

So, I synthesized the second and third Way, using the Taphold event in jquery Mobile to simulate the LONGTAP operation to trigger the copy menu of the phone system, which basically allows you to highlight all text content by long pressing the text area on all mobile device browsers. Again, Taphold's compatibility bug here is not detailed with the solution, if your project requirements for excellence, you can search the solution yourself.

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

HTML code:

<div class= "para requirement" ><div class= "Tips tips-t" >1, must first download to take effect <br/>2, can not download from the leaderboard Oh </div> <div class= "Cparea" ><div class= "KWD" id= "KWD" ><span> Three Kingdoms smart phone optimization Master </span></div></div ><div class= "Cparea" ><span class= "Kdes" ><b>★</b> long press the dotted box, copy keywords </span></div> <a href= "https://itunes.apple.com/cn/" data-role= "button" class= "downlink" > go appstore search Download </a></div >

JavaScript code:

<script type= "Text/javascript" >$ ("#kwd"). Bind ("Taphold", function () {//Do not support Iphone/itouch/ipad Safari    var Doc = document,     text = Doc.getelementbyid ("KWD"),    range,     selection;    if (doc.body.createTextRange) {        range = Document.body.createTextRange ();        Range.movetoelementtext (text);        Range.Select ();    } else if (window.getselection) {        selection = Window.getselection ();                Range = Document.createrange ();        Range.selectnodecontents (text);        Selection.removeallranges ();        Selection.addrange (range);     } else{    alert ("The browser does not support long-press the 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:1.1875em;font-size:1.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:1.25em;padding-right:. 1em;}

Description: The MARGIN:2EM here is designed to achieve long press-to-select functionality on the Safari browser, in order to respect the restore design effect, the parent container. The Cparea also uses a negative margin to counteract this 2em margin. In the end, not only the visual and the design are consistent, but also the long-press full-select excitation system menu.

Reprint please indicate the space from Csdn Freshlover.

Mobile HTML5 page Long Press to implement a compatible solution highlighting the full selection of text content