Kürzlich müssen wir HTML5 -WebApp auf der Seite implementieren, um eine Kopiefunktion zu implementieren: Benutzer können den Text auswählen und das Systemkopiemenü im langen Drückentext einstellen. Der Benutzer kann klicken, um für die Kopieroperation zu kopieren, und dann einfügen In der AppStore -Suche nach der entsprechenden Anwendung. Der Grund, warum es nicht verwendet wird, um in Form von Links direkt zur entsprechenden Anwendung der AppStore zu springen, besteht darin, das Gewicht der beworbenen Unternehmens -App über die Active Input -Keyword -Suche des Benutzers zu erhöhen. Diese Kopierfunktion ist daher für die Benutzererfahrung von wesentlicher Bedeutung.
Wenn Sie einige Praktiken ausprobieren, ist die Kompatibilität auf der Android/iOS -Plattform nicht sehr gut. Im WeChat -Browser ist es einfach, einen langen Drucktext zu erreichen, um das Systemmenü zu stimulieren. Die Leistung anderer Browser ist jedoch nicht konsistent. Versuchen Sie, das Systemmenü mit einem Tag zu aktivieren. Diese Methoden haben kompatible Defekte.
1) Obwohl ein Tag mit einem HREF -Attribut im UC -Browser und im Baidu -Browser verwendet wird, wird Long Drücken Sie den Text KOSTENLOSE Kopieren/Wählen Sie das Menü "Text". Einige Android -Telefone, in einigen Android -Telefonen, werden der Systembrowser und das iPhone als reine Links angesehen, nur der Kopier -Link wird angezeigt, ohne das Textmenü zu kopieren. Auch wenn nur eine kleine Anzahl von Browsern als machbar angesehen wird, hat dies einen Schritt mehr, um Benutzer zu betreiben und die Komplexität zu erhöhen. Dieser Plan ist also nicht wünschenswert.
2) Mit Hilfe von Auswahl- und Bereichsmethoden muss die Kompatibilität verschiedener Browser berücksichtigt werden.
Funktionsauswahl (Element) {var doc = document, text = docgetElementById (Element), Bereich, Auswahl; Selection = WindowGetSelection (); } else {alert (keine);}}Leider können alle Texte nicht ausgewählt werden, indem Sie auf der iPhone -Safari hoch klicken oder lange drücken (da er auch das Fenster unterstützt. ). Daher gibt es Defekte in dieser Methode. Wählen Sie aktiv die Methode des chinesischen Textgebiets aus und fügen Sie sie später bei.
3) iPhone -Benutzer wissen möglicherweise, dass Safari den Text automatisch in einem bestimmten Textbestandteil des Textes in einem bestimmten Textbestandteil des Textes in einem bestimmten Textbestandteil im Wahlkreis automatisch ausgewählt wird (der Zieltext muss in einen unabhängigen Div -Block -Container platziert werden). Basierend auf dieser Funktion können Sie die CSS -Marge ändern, um diese Funktion zu ändern. Nach dem Test, unabhängig von den Android- und iOS -Plattformen, ist der mit Mobiltelefonen gelieferte Systembrowser kompatibel. Mobile Produkte von anderen Herstellern wie UC -Browser und Baidu -Browser, da es verschiedene Mechanismen gibt, können sie nur die freie Replikationsfunktion verwenden, die von diesen Browsermenüs bereitgestellt wird.
Daher habe ich den zweiten und dritten Weg kombiniert, wobei ich das Taphold -Ereignis in JQuery Mobile verwendet habe, um die Kopie des Mobiltelefonsystems für den LongTAP -Betrieb zu simulieren, um alle Textinhalte hervorzuheben. Erwähnen Sie, dass die kompatiblen Fehler von Taphhold hier nicht in die Lösung beigefügt werden.
Hier sind meine Lösung. Der spezifische Code lautet wie folgt:
HTML -Code:
<div class = para Anforderung> <div class = tips tipps-t> 1. class = cParea> <div class = kwd id = kwd> <span> Master der drei Königreiche Yanyi Mobiltelefonoptimierung </span> </div> </div> <div class = cParea> <span class = kdes> < B> ★ </b> Lange drücken Download </a> </div>
JavaScript -Code:
<Script type = text/javaScript> $ (#kwd) bind (taphhold, function () {// unterstützt iPhone/itouch/iPad safari vari var docum = document, text = docgetElementById (KWD), Bereich, Auswahl; if ((() DocBodyCreateTextrange) {range = documentBodyCreateTextrange (); );Schlüssel -CSS -Code:
CPAREA {Text-Align: Mitte; 1875em; #212121;Hinweis: Rand hier: 2EM ist die Erreichung der langen Funktion des langen Drückens des Safari -Browsers. Dieser 2EM. Am Ende hat nicht nur das visuell mit der Designzeichnung übereinstimmend, sondern auch ein langes Stimulationssystemmenü.
Fügen Sie schließlich den vollständigen Weg hinzu, um Safari zu unterstützen:
$ (#KWD) .bind (taphhold, function () {var doc = documen, text = docgetElementById (kwd), Bereich, Selektion; if (docBoDyCreeRexrange) {// IE Range = documentBodyCreateTextrange (); ();} Else if (WindowGetSelection) {// ff CH SF Selection = WindowgetSelection (); ; 9-DES nicht Support textContent macht (0, textFirstchildtextContentLength, 0, textFirstchild); }});Das oben genannte ist der Inhalt dieses Artikels.