Recently, we need to give HTML5 WebAPP to implement a copy function on the page: Users can select the text and pop up the system copy menu in the long press text, and the user can click to copy for the copy operation, and then paste it to the appStore search for the corresponding application. The reason why it is not used to directly jump to the AppStore corresponding application in the form of links is to increase the weight of the promoted corporate APP through the user's active input keyword search. So this copy function is essential for user experience.
Trying some practices, the compatibility on the Android/iOS platform is not very good. In the WeChat browser, it is easy to achieve long -press text to stimulate the system menu. But the performance of other browsers is not consistent. Including simulation Focus Input, JavaScript selection, try to activate the system menu with A tag. These methods have compatible defects.
1) Although a tag with an HREF attribute is used on the UC browser and Baidu browser, long press the text will appear free copy/select the text menu. After selecting this menu, the full -selected/copy menu will appear, but in some Android phones, in some Android phones, The system browser and iPhone are regarded as pure links, only the copy link pops up, without copying the text menu. Moreover, even if only a small number of browsers are considered feasible, this will have a step more to operate users, increasing complexity. So this plan is not desirable.
2) With the help of Selection and Range methods, the compatibility of different browsers needs to be taken into account. The code is as follows:
Function selecttext (Element) {var doc = document, text = docgetelementByid (Element), Range, Selection; if (DOCBODYCREATEXTRANGE) {Range = DOCUMENTBOD ycreatetextRange (); RangemoveToelementtext (text); Rangeselect ();} Else if (WindowGetSelection) {selection = WindowGetSelection (); Range = documentcreaterange (); RangeselectNodeContents (text); Selectionremoveallranges (); SelectIONDRANGE (RANGE); /*if ( /*if SelectionSetBaseAndExtent) {SelectionSetBaseAndextExtent (text, 0, text, 1);}*/} else {alert (None);}}Unfortunately, all texts cannot be selected by clicking or long pressing high -lit on the iPhone Safari (since it also supports Window.Getselection, why the text cannot be selected by default after the Safari browser adDRANGE operation, please leave a message for the reason). Therefore, there are defects in this method. Actively select the method of the Chinese text area and attach it later.
3) iPhone users may know that long pressing the blank area around the text in a certain text constituency, Safari will automatically select the text in the constituency (the target text needs to be placed in an independent DIV block container). Based on this feature, use CSS Margin to modify it. Using this feature can just solve the incompatibility of the above -mentioned second method in iOS devices. After testing, regardless of the Android and iOS platforms, the system browser that comes with mobile phones is compatible. As for mobile products from other manufacturers such as UC browser and Baidu browser, because there are different mechanisms, they can only use the free replication function provided by these browser menus.
Therefore, I combined the second and third way, using the taphold event in jQuery Mobile to simulate the copy of the mobile phone system for the LONGTAP operation. Text areas to highlight all text content. Let's mention that Taphold's compatible bugs will not be attached to the solution in detail here. If your project requires excellence, you can search for solutions by yourself.
Here are my solution. The specific code is as follows:
HTML code:
<div class = Para Requirement> <div class = tips tips-T> 1. You must download it for the first time before it takes effect <br/> 2. Can't download it from the ranking </div> <div class = cparea> <div class = kwd id = kwd> <span> Master of the Three Kingdoms Yanyi mobile phone optimization </span> </div> </div> <div class = cparea> <span class = kdes> <b> ★ </b> Long press the dotted frame, Copy keywords </span> </div> <a href = https: // iTunesApplecom/CN/Data-Role = Button class = download> Go to AppStore to search and download </a> </div>
Javascript code:
<Script Type = Text/Javascript> $ (#kwd) bind (taphold, function () {// does not support iPhone/iTouch/iPad Safari Var Doc = DOCUMENT, text = DOCGetelementByid (KWD), Range, Selection; If (DOCBODYCREATETEXTRANGE ) {range = documentbodycreatetextRange (); Rangemovetoelementtext (text); Rangeselect ();} Else if (WindowgetSelection) {Selection = WINDOWGETSELEC tion (); Range = documentcreaterange (); RangeselectNodeContents (text); SelectionremovealLANGES (); SelectIONDDRANGE (Range); } Else {Alert (the browser does not support long press replication function);}}); </script>Key CSS code:
CPAREA {Text-Align: Center; Font-Family: Microsoft Yahei; Margin: -2EM 0 0;} KWD {Display: Inline-Block; COLOR: #272727; : #fff; font-size: 1875em; FONT -Size: 1875em; padding: 75em 1em; border: 1px dashed #E60012; -webkit-user-select: margin: 2em;} kwd span {Display: Border: 1px so lid #fff;} kdes {display: Inline-black; color: #212121; font-size: 875em; padding-top: 0;} kdes b {color: #ed5353; font-size: 25em; padding-right: 1EM;}Note: Margin here: 2EM is to achieve the long -pressing function of the long pressing of the Safari browser. In order to respect the reducing design manuscript effect, the parent container .cparea also used the negative side distance to offset the outer distance of this 2EM. In the end, not only has the visually consistent with the design drawing, but also achieves a long -pressing stimulation system menu.
Finally, add the complete way to support Safari:
$ (#kwd) .bind (taphold, function () {var doc = documen, text = DOCGetelementByid (kwd), Range, SelectION; IF (DOCBODYCREATEXRANGE) {// IE Range = documentbodyCreatetextRange (); RangemovetoelementText (text); Rangeselect ();} Else if (windowgetSelection) {// ff ch sf selection = windowgetSelection (); righte = documentcreaterant (); onremoveallRafes (); SelectionadDRANGE (RANGE); // Test consoleLog (textTextContent); TextInInnenertext && consoleLog (textinenertext); // Firefox does not support InstRTEXT Consolelog (texttextContentLength); TextIninenertext && & & ConsoleLog (TextIninenertextLENGTH); // 1 consoleLog (textFirsTChildTextContentLength); textnenertext && consoleLog (textFirs); consoleLog (TextFirstChildinnerhtmllength); // Note that IE9-does not support TextContent MakeSelections (0, TextFirsTChildTextContentLength, 0, textfirstChild); aseandExtent) {selectSelectAllChildren (text); selectSetBaseAndExtent (text, 0, text, 4);} */} Else {Alert (browser does not support long press replication function);}}); functions ES [Child]); Rangesetstart (ParentChildNodes [Child], Start); Rangeseme (ParentChildNodes [Child], End); Var Sel = WindowGetSelection (); SelremoveAllRanges (); SELADDRANGE (Range);}The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.