web-dev-qa-db-fra.com

HTML: Pourquoi Android affiche "Aller" au lieu de "Suivant" dans le 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 de connexion)

Pourquoi le navigateur Android affiche-t-il le bouton "Aller" dans le clavier virtuel au lieu du bouton "Suivant" lorsque le focus est dans le 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 qui ne fonctionnera évidemment pas. . [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 vous tester ci-dessous.]

Je voudrais avoir le texte du type d'entrée pour avoir le bouton "Suivant" et le mot de passe du type d'entrée (la dernière entrée avant la soumission) pour avoir le bouton "Aller".

Un exemple de formulaire problématique est à https://peda.net/:login (ce formulaire contient du code pour détecter la touche "Entrée" pour l'entrée et empêche de soumettre le formulaire à moins que la dernière entrée de formulaire visible ne soit focalisée).

Connaissez-vous un vrai correctif pour ce problème? Je sais que si j'implémentais une application native, j'utiliserais Android:imeOptions="actionNext" (Voir Comment changer le bouton "Go" du clavier de la touche logicielle Android en "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 "Browser" exécutée sur Android 2.3.4 (Cyanogenmod 7)
  • Application système "Browser" exécutée sur Android 4.2.2 (Cyanogenmod 10.1)
  • Application système "Browser" exécutée sur Android 4.3.1 (Cyanogenmod 10.2 M1)
  • Application système "Browser" (navigateur AOSP) fonctionnant sur Android 4.4.2 (Cyanogenmod 11.0 M3)
  • Application système "Browser" (navigateur AOSP) fonctionnant sur Android 5.5.1 (Cyanogenmod 12.1) [a une icône de flèche au lieu de Word "Go"]
  • Application système "Browser" (navigateur AOSP) fonctionnant sur Android 6.0.1 (Cyanogenmod 13.0) [a une icône de flèche au lieu de Word "Go"]
androidhtmlbrowserandroid-softkeyboard
55
Mikko Rantalainen

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

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

Je ne pense pas que vous puissiez 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:

    <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 consisterait à définir les deux entrées comme obligatoires à l'aide du nouveau HTML5 attribut requis - mais le Android Browser ne le supporte pas encore. Cependant, une bonne approche serait de compléter l'attribut requis avec une solution de secours JavaScript telle que celle décrite par CSSKarma .

22
John Mellor

Pour ajouter à la réponse de John, Android ajoute toujours "Aller" aux entrées de texte et ajoute toujours "Suivant" aux entrées de chiffres. J'adorerais entendre la personne responsable pour ce choix expliquer leur logique.

La conception du clavier tactile est tout simplement moche à cet égard, car chaque utilisateur avec lequel j'ai testé jusqu'à présent a pensé que le gros bouton bleu du clavier doit être le bouton qui vous amène au champ de formulaire suivant, puis au dernier champ de formulaire vous permet soumettre le formulaire.

iOS est encore pire à cet égard, car ils offrent un bouton `` Aller '' avec chaque champ de formulaire et aucun moyen de parcourir les champs. C'est bien que Apple aime rendre les ordinateurs simples pour les gens, mais en supposant parfois que les gens aiment ça simple peuvent présumer que les gens sont tous des idiots.

Désolé pour cette diatribe. J'ai quelque chose de constructif à offrir:

Si votre dernier champ de formulaire est de type = nombre, alors il y a un petit piratage qui fonctionnera sur Android ainsi que iOS: ajoutez une entrée de texte invisible au formulaire avec onfocus = "$ ('#thisForm'). submit (); ". Dans Android ce champ clignotera brièvement en vue: dans iOS il ne le fera pas. Pour faire le Android situation plus agréable au goût, vous pouvez soit définir une valeur pour la saisie de texte comme "Fermer ce formulaire", soit définir sa largeur à 0, ce qui fera que le champ du formulaire ne sera pas tout à fait 0 largeur mais toujours très petit.

Hack horrible, mais bon, blâmer les gens de l'interface utilisateur de Google et Apple.

51
Wytze

C'est le problème de Chromium si vous voulez le regarder: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

Voici une solution de contournement pour Android qui modifie le "enter" dans l'entrée utilisateur afin qu'il "tabule" dans le champ du mot de passe (et ne soumet pas le formulaire):

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

<form action="?">
  User <input type=text onkeypress=key(event)><br><br>
  Password <input id=pw type=password><br><br>
  <input type=submit>
</form>

<script>
  function key(event) {
    if (event.charCode == 13 && /Android/.test(navigator.userAgent)) {
      event.preventDefault();
      document.getElementById('pw').focus();
    }
  }
</script>

Modifier: Remarque Windows Phone met également Android dans l'UA, a donc besoin de tests qui fonctionnent sur Windows Phone (et Android Firefox).

7
robocat

voir Remplacer le bouton Go du clavier virtuel par Suivant dans Phonegap .

Pour une navigation rapide, voyez ceci plunker . Pour suivre le code complet

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<form action="" id="form">
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
  <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  Last name: <input type="text" name="lastname" disabled="disabled">
Select <select name="select" id="selectBox">
               <option>Select Something</option>
       </select>
    Last name: <input type="text" name="lastname">
Select <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  <button type="submit">Submit</button> 
</form>

<script>
(function($) {
    $.fn.enterAsTab = function(options) {
        var settings = $.extend({
            'allowSubmit': false
        }, options);
        $(this).find('input, select, textarea, button').live("keydown", {localSettings: settings}, function(event) {
            if (settings.allowSubmit) {
                var type = $(this).attr("type");
                if (type == "submit") {
                    return true;
                }
            }
            if (event.keyCode == 13) {
                var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
                var idx = inputs.index(this);
                if (idx == inputs.length - 1) {
                    idx = -1;
                } else {
                    inputs[idx + 1].focus(); // handles submit buttons
                }
                try {
                    inputs[idx + 1].select();
                }
                catch (err) {

                }
                return false;
            }
        });
        return this;
    };
})(jQuery);

$("#form").enterAsTab({ 'allowSubmit': true});
</script>

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

5
vinesh

Pour éviter toute confusion pour l'utilisateur, laissez le bouton GO fonctionner comme bouton Entrée uniquement.

Pour cela, utilisez une balise de formulaire, mais pour éviter les soumissions incomplètes, utilisez l'attribut 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');
                }

});

Pour éviter le rechargement de la page, n'utilisez pas les attributs action ou onsubmit dans la balise de formulaire, 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, le firefox et les navigateurs par défaut Android affichent les boutons précédent et suivant qui fonctionneront comme des onglets, alors utilisez les attributs tabindex appropriés sur l'élément d'entrée du formulaire.

0
Shishir Arora

Nous ne pouvons pas empêcher ce comportement par défaut car il n'y a pas d'entrée type="next" balise disponible en HTML dès maintenant. Donc, par défaut, le bouton "Go" apparaît. Lien ci-dessous contenant la liste des balises de type d'entrée disponibles: http://www.w3schools.com/tags/att_input_type.asp

0
VicJordan