Récemment, nous devons donner HTML5 WebApp pour implémenter une fonction de copie sur la page: les utilisateurs peuvent sélectionner le texte et faire apparaître le menu de copie système dans le texte à longue appuyez sur le texte, et l'utilisateur peut cliquer pour copier pour l'opération de copie, puis coller Il recherche l'application Appstore de l'application correspondante. La raison pour laquelle il n'est pas utilisé pour passer directement à l'application correspondante appstore sous forme de liens est d'augmenter le poids de l'application d'entreprise promue via la recherche de mots clés de saisie active de l'utilisateur. Cette fonction de copie est donc essentielle pour l'expérience utilisateur.
Essayant certaines pratiques, la compatibilité sur la plate-forme Android / iOS n'est pas très bonne. Dans le navigateur WeChat, il est facile d'obtenir un texte à longue pression pour stimuler le menu du système. Mais les performances des autres navigateurs ne sont pas cohérentes. Y compris l'entrée de mise au point de simulation, la sélection JavaScript, essayez d'activer le menu système avec une balise. Ces méthodes ont des défauts compatibles.
1) Bien qu'une balise avec un attribut HREF soit utilisée sur le navigateur UC et le navigateur Baidu, appuyez sur le texte gratuit, la copie / sélectionner le menu de texte. Certains téléphones Android, dans certains téléphones Android, le navigateur système et l'iPhone sont considérés comme des liens purs, seul le lien de copie apparaît, sans copier le menu texte. De plus, même si seul un petit nombre de navigateurs sont considérés comme faisables, cela aura un pas de plus pour faire fonctionner les utilisateurs, augmentant la complexité. Ce plan n'est donc pas souhaitable.
2) À l'aide des méthodes de sélection et de plage, la compatibilité des différents navigateurs doit être prise en compte.
Fonction SelectText (élément) {var doc = document, text = docgetElement (élément), range, sélection; SELECTION = WindowgetSelection (); } else {alert (aucun);}}Malheureusement, tous les textes ne peuvent pas être sélectionnés en cliquant ou en appuyant sur une apparition longue à High-Lit sur l'iPhone Safari (puisqu'il prend également en charge Window.GetSelection, pourquoi le texte ne peut pas être sélectionné par défaut après le fonctionnement de safari AddRange, veuillez laisser un message pour la raison ). Par conséquent, il y a des défauts dans cette méthode. Sélectionnez activement la méthode de la zone de texte chinoise et attachez-la plus tard.
3) Les utilisateurs de l'iPhone peuvent savoir que la pressage depuis longtemps de la zone vide autour du texte dans une certaine circonscription de texte, Safari sélectionnera automatiquement le texte dans la circonscription (le texte cible doit être placé dans un conteneur de blocs Div indépendant). En fonction de cette fonctionnalité, utilisez la marge CSS pour la modifier. Après les tests, quelles que soient les plates-formes Android et iOS, le navigateur système fourni avec des téléphones mobiles est compatible. Quant aux produits mobiles d'autres fabricants tels que UC Browser et Baidu Browser, car il existe différents mécanismes, ils ne peuvent utiliser que la fonction de réplication gratuite fournie par ces menus de navigateur.
Par conséquent, j'ai combiné les deuxième et troisième voies, en utilisant l'événement Taphold dans JQuery Mobile pour simuler la copie du système de téléphone mobile pour l'opération LongTap. Mentionnons que les bogues compatibles de Taphold ne seront pas attachés à la solution en détail ici.
Voici ma solution. Le code spécifique est le suivant:
Code html:
<div Class = Para Exigence> <div class = Tips TIPS-T> 1. Vous devez le télécharger pour la première fois avant qu'il ne prenne effet <br/> 2. Impossible de le télécharger à partir du classement </div> <div class = cParea> <div class = kwd id = kwd> <span> maître des trois royaumes yanyi optimisation du téléphone mobile </span> </div> </div> <div class = cParea> <span class = kdes> < b> ★ </b> Appuyez longtemps sur le cadre en pointillé, copiez les mots clés </span> </div> <a href = https: // iTunesApplecom / cn / data-role = Button class = Télécharger> Accédez à Appstore à la recherche et Télécharger </a> </ div>
Code javascript:
<Script type = text / javascript> $ (#kwd) bind (taphold, function () {// ne prend pas en charge iPhone / itouch / ipad safari var doc = document, text = docktElementByid (kwd), plage, sélection; if ( DocbodyCreatEtExtrange) {range = documentBodyCreatEtTrange (); ));Code CSS clé:
CParea {Text-Align: Centre; 1875M # 212121;Remarque: Marge ici: 2EM est d'atteindre la fonction de pression longue de la longue pression du navigateur Safari. Ce 2em. En fin de compte, non seulement la cohérente visuellement avec le dessin de conception, mais obtient également un menu de système de stimulation à longue pression.
Enfin, ajoutez le moyen complet de prendre en charge Safari:
$ (#kwd) .bind (taphold, function () {var doc = documen, text = docktElementById (kwd), range, sélection; if (docbodycreatexRange) {// ie range = documentBodyCreateTextrange (); rangeMovetOelementText (text); rangeselecTelect. ();} Else if (windowgetSelection) {// ff ch sf sélection = windowgetSelection (); ; Prise en charge des caselections de TextContent (0, TextFirstChildTextContentLength, 0, TextFirstChild); }}); fonctions es [enfant]);Ce qui précède est tout le contenu de cet article.