HTML: Pourquoi le navigateur Android affiche-t-il «Go» au lieu de «Next» au clavier?

J’ai un formulaire de connexion HTML qui contient les éléments suivants (dans cet ordre):

  • input type=text (saisie du nom d’utilisateur)
  • input type=password (mot de passe)
  • input type=submit (bouton Connexion)

Pourquoi le navigateur Android affiche-t-il le bouton “Go” du clavier logiciel au lieu du bouton “Suivant” lorsque le focus est dans la text input ? Cela empêche l’utilisateur de se connecter très facilement, car après avoir entré le nom d’utilisateur, l’utilisateur appuie sur le bouton en bas à droite du clavier (généralement l’action correcte) et le formulaire sera soumis avec un mot de passe vide. . [Ce comportement aurait du sens si mon navigateur était configuré pour mémoriser les mots de passe et que le gestionnaire de mots de passe serait en mesure de saisir le mot de passe. Cependant, ce n’est pas le cas ici car vous pouvez tester vous-même ci-dessous.]

Je voudrais avoir le texte de type de saisie pour avoir le bouton “Suivant” et le mot de passe de type d’entrée (la dernière entrée avant l’envoi) pour avoir le bouton “Go”.

Un exemple de forme problématique se trouve sur https://peda.net/:login (ce formulaire contient du code pour détecter la clé “Entrée” pour l’entrée et empêche la soumission du formulaire à moins que la dernière entrée de formulaire visible soit focalisée).

Connaissez-vous un vrai correctif pour ce problème? Je sais que si android:imeOptions="actionNext" application native, j’utiliserais android:imeOptions="actionNext" (voir Comment changer le bouton “Go” du clavier logiciel Android pour “Next” ). Cependant, dans ce cas, il s’agit d’un formulaire HTML et d’un navigateur par défaut Android.

Le problème est visible avec au moins les configurations suivantes:

  • Application système “Navigateur” fonctionnant sur Android 2.3.4 (Cyanogenmod 7)
  • Application système “Browser” fonctionnant sous Android 4.2.2 (Cyanogenmod 10.1)
  • Application système “Navigateur” fonctionnant sur Android 4.3.1 (CyanogenMod 10.2 M1)
  • Application système “Navigateur” (navigateur AOSP) fonctionnant sous Android 4.4.2 (CyanogenMod 11.0 M3)
  • L’application système “Browser” (navigateur AOSP) fonctionnant sous Android 5.5.1 (Cyanogenmod 12.1) [possède une icône en forme de flèche au lieu du mot “Go”]
  • L’application système “Browser” (navigateur AOSP) fonctionnant sous Android 6.0.1 (Cyanogenmod 13.0) [possède une icône en forme de flèche au lieu du mot “Go”]

Le navigateur Android affiche toujours Go pour les champs de saisie car certains formulaires sur le Web (en particulier les champs de recherche) n’ont pas de bouton de soumission et ne peuvent être activés qu’en appuyant sur Entrée (Go équivaut à Entrée).

Au lieu de cela, certaines versions d’Android afficheront une touche de tabulation en bas à droite du clavier pour faciliter la navigation entre les champs de formulaire.

Je ne pense pas que vous pouvez empêcher l’un ou l’autre de ces comportements.

Deux solutions possibles:

  1. Utilisez JavaScript pour ignorer la soumission du formulaire de connexion jusqu’à ce que les deux entrées ne soient pas vides:

     
  2. La solution la plus propre serait de définir les deux entrées à l’aide du nouvel atsortingbut HTML5 requirejs , mais le navigateur Android ne le permet pas encore. Cependant, une bonne approche consisterait à compléter l’atsortingbut requirejs par un repli JavaScript tel que celui décrit par CSSKarma .

Pour append à la réponse de John, Android ajoute toujours «Go» aux entrées de texte et ajoute toujours «Next» aux entrées de numéro . J’aimerais entendre la personne responsable de ce choix expliquer leur logique.

La conception des touches programmables est simplement moche à cet égard, car chaque utilisateur avec lequel j’ai testé jusqu’à présent a pensé que le gros bouton bleu du clavier devait être le bouton qui vous amènerait au champ de formulaire suivant. soumettre le formulaire.

iOS est encore pire à cet égard, car ils proposent un bouton “Go” avec chaque champ de formulaire et aucun moyen de parcourir les champs. C’est bien qu’Apple aime rendre les ordinateurs plus simples pour les gens, mais en supposant parfois que les gens comme eux peuvent avoir de l’ombre en prétendant que les gens sont tous des idiots.

Désolé pour ça. J’ai quelque chose de constructif à offrir:

Si votre dernier champ de formulaire se trouve être type = numéro, alors il existe un petit hack qui fonctionnera aussi bien sur Android que sur iOS: ajoutez une entrée de texte invisible au formulaire avec onfocus = “$ (‘# thisForm’). Submit ( ) “. Dans Android, ce champ clignotera brièvement: sous iOS, il ne le fera pas. Pour rendre la situation Android plus acceptable, vous pouvez soit définir une valeur pour le texte comme “Closing this form”, soit définir sa largeur sur 0, ce qui fera que le champ du formulaire ne sera pas tout à fait 0 mais toujours très petit. .

Horrible hack, mais bon, blâmer les gens de l’interface utilisateur chez Google et Apple.

voir le bouton Remplacer Go sur le clavier logiciel avec Next dans Phonegap .

Pour une navigation rapide, voir ce plongeur . Suivre le code complet

  
First name: Last name: Last name: Select Last name: Select

NOTE: n’oubliez pas de remplacer la méthode .live() de jquery par .on() si vous utilisez une version plus récente de jquery que 1.9.

Ceci est le problème du chrome si vous voulez le regarder: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

Voici une solution de contournement pour Android qui change le “enter” dans l’entrée de l’utilisateur de sorte qu’il “tabule” dans le champ de mot de passe (et ne soumet pas le formulaire):

http://jsbin.com/zakeza/1/quiet

 
User

Password

Edit: Remarque Windows Phone place également Android dans l’UA. Il doit donc être testé sur Windows Phone (et Android Firefox).

Nous ne pouvons pas empêcher ce comportement par défaut car il n’existe pas de balise input type="next" disponible dans HTML dès maintenant. Donc, par défaut, le bouton “Go” apparaît. Le lien ci-dessous contient la liste des balises de type d’entrée disponibles: http://www.w3schools.com/tags/att_input_type.asp

Pour éviter toute confusion pour l’utilisateur, laissez le bouton GO fonctionner comme bouton d’entrée uniquement.

Pour cela, utilisez une balise de formulaire, mais pour éviter les soumissions incomplètes, utilisez l’atsortingbut désactivé sur le bouton de soumission.

 $("input:not(.submit)").bind('input',function(){ var isValid = validateInputs(); if(isValid) { $('.submit').removeAttr('disabled'); } else { $('.submit').attr('disabled','disabled'); } }); 

Maintenant, pour éviter le rechargement de la page, n’utilisez pas les atsortingbuts action ou onsubmit dans la balise form, utilisez plutôt

 $('#formid').submit(function(){ var disabled=$('.submit').attr('disabled'); if(disabled=='disabled') { return; } callOnSubmitFunction(); return false; } ); 

return false est important ici pour éviter le rechargement de la page.

à l’exception de chrome, les navigateurs firefox et android affichent des boutons prev et next qui fonctionneront comme des boutons d’onglet, donc utilisez les atsortingbuts de tabindex appropriés sur l’élément d’entrée du formulaire.