HTML: Pourquoi Android browser spectacle "Aller" au lieu de "Suivant" dans clavier?

Question

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

• input type=text (nom d'utilisateur)
• input type=password (mot de passe)
• input type=submit (Bouton connexion)

Pourquoi le navigateur Android afficher le bouton "Go" dans clavier souple à la place du bouton "Suivant" lorsque l'accent est mis sur l' text input? Cela provoque de l'utilisateur de l'échec de connexion 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 à un mot de passe vide, ce qui évidemment n'est pas d'aller travailler. [Ce comportement aurait un sens dans le cas de mon navigateur a été configuré pour retenir les mots de passe et le mot de passe du gestionnaire serait en mesure de remplir le mot de passe. Cependant, ce n'est pas le cas ici, comme vous pouvez le tester par vous-même ci-dessous.]

J'aimerais avoir le type de saisie de texte pour avoir le bouton "Suivant" et le type de saisie de mot de passe (la dernière entrée avant de la soumettre) pour avoir le bouton "Go".

Un exemple de problématique formulaire est à https://peda.net/:login (l'interface utilisateur est actuellement toujours en finnois).

Connaissez-vous une vraie solution pour ce problème? Je sais que si je devais la mise en œuvre de l'application native, je ne l'utiliserais android:imeOptions="actionNext" (voir Comment faire pour modifier le Android touche du clavier bouton "Go" pour "Suivant"). Toutefois, dans ce cas, c'est un formulaire HTML et Android navigateur par défaut.

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

• "Le navigateur, système d'application en cours d'exécution sur Android 2.3.4 (Cyanogenmod 7)
• "Le navigateur, système d'application en cours d'exécution sur Android 4.2.2 (Cyanogenmod 10.1)
• "Le navigateur, système d'application en cours d'exécution sur Android 4.3.1 (Cyanogenmod 10.2 M1)
• "Le navigateur, système d'application (PSBA Navigateur) fonctionnant sur Android 4.4.2 (Cyanogenmod 11.0 M3)

Answer 1

Pour ajouter à la réponse de Jean, Android ajoute toujours "Aller", à des saisies de texte et ajoute toujours "Suivant" pour nombre d'entrées. J'aimerais entendre la personne responsable de ce choix, expliquer leur logique.

Le softkeyboard design est juste moche à cet égard, parce que chaque utilisateur que j'ai testé jusqu'à présent a pensé sur le gros bouton bleu dans le clavier doit être le bouton qui vous amène à la prochaine champ de formulaire, puis dans le dernier champ du formulaire vous permet de soumettre le formulaire.

iOS c'est encore pire à cet égard, car ils offrent un bouton " Go " à chaque champ de formulaire et aucun moyen de l'onglet à travers les champs. C'est bien qu'Apple aime à rendre les ordinateurs plus simple pour les gens, mais parfois, en supposant que les gens aiment les choses simples peuvent ombrage de supposer que les gens sont tous des idiots.

Désolé diatribe. J'ai quelque chose de constructif à proposer:

Si votre dernier champ du formulaire se trouve être le type=numéro de téléphone, puis il ya un petit hack qui fonctionne sur Android ainsi que iOS: ajouter une invisible de saisie de texte à l'écran avec onfocus="$('#thisForm').submit();". Dans Android ce champ clignote brièvement en vue: en iOS il l'habitude. Pour faire de l'Android situation plus acceptable, vous pouvez définir une valeur pour la saisie de texte comme "la Clôture de cette forme", ou vous pouvez définir la largeur de 0, ce qui va provoquer le champ de formulaire pour être pas tout à fait 0 largeur, mais encore très petite.

Horrible dos, mais bon, c'est la faute sur l'INTERFACE utilisateur de personnes à Google et Apple.

Answer 2

Le Navigateur Android affiche toujours Aller pour les champs de saisie parce que certains formulaires sur le web (en particulier les zones de recherche) n'ont pas de bouton "soumettre", et ne peut être activé en appuyant sur Enter (Aller est équivalent à l'Entrée).

Au lieu de cela certaines versions d'Android affichera 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'autre de ces comportements.

Deux solutions possibles:

1. Utiliser JavaScript pour ignorer la soumission du formulaire de connexion jusqu'à ce que les deux entrées sont non-vide:

   <form name="loginForm" onsubmit="return document.loginForm.user.value != '' && document.loginForm.pass.value != ''">
       <input type="text" name="user">
       <input type="password" name="pass">
       <input type="submit" value="Login">
   </form>
   

2. La solution la plus propre serait de définir des deux entrées d'être nécessaire à l'aide de la nouvelle HTML5 attribut nécessaire - mais le Navigateur Android ne supporte pas encore. Cependant une bonne approche serait de compléter l'attribut obligatoire avec un JavaScript de secours telle que celle décrite par CSSKarma.

Answer 3

J'ai lu des réponses ci-dessus. Ma réponse est pour continuer à utiliser la balise form. le bouton fonctionne comme le bouton enter seulement alors. pour éviter les demandes incomplètes utilisation désactivé attribut sur le bouton soumettre.

$("input:not(.submit)").bind('input',function(){
var isValid = validateInputs();

if(isValid)
                {
                    $('.submit').removeAttr('disabled');
                }
                else
                {
                    $('.submit').attr('disabled','disabled');
                }

});

Maintenant, Pour éviter de recharger la page à ne pas utiliser l'action ou de l'onsubmit attributs dans la balise de formulaire, au lieu d'utiliser

$('#formid').submit(function(){

var disabled=$('.submit').attr('disabled');
                if(disabled=='disabled')
                {
                    return;
                }

callOnSubmitFunction();
return false;
}
);

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

à l'exception de chrome, firefox et la android par défaut des navigateurs montrent un précédent et suivant des boutons qui fonctionnent comme des boutons de l'onglet, donc de l'utiliser à bon tabindex atrributs sur l'élément de formulaire.