web-dev-qa-db-fra.com

Est-ce une bonne idée de se recentrer dans une zone de texte après l'avoir validée?

Disons que j'ai une zone de texte où vous n'êtes autorisé qu'à entrer des nombres entiers. Lorsque le focus est perdu, la page doit vérifier si l'entrée est un entier ou non. Si ce n'est pas un entier, l'utilisateur devrait recevoir un message d'erreur. Est-ce une bonne idée de forcer le focus sur la zone de texte après que l'utilisateur ferme la boîte d'alerte?

Sur un de mes projets, j'ai:

jQuery("input[data-type=int]").blur(function() {
    var val = this.value.trim();

    var i = parseInt(val);

    if(isNaN(i))
    {
        alert("Please enter a number");
        this.focus();
    }
});

Sur une ancienne version de google chrome la boîte d'alerte apparaît et après avoir cliqué sur le bouton "OK", la zone de texte est à nouveau mise au point. Sur une version plus récente de google-chrome, la blur L'événement continue d'être déclenché une fois que this.focus() est exécutée, ce qui génère des boîtes d'alerte sans fin.

J'ai essayé la même page avec firefox et là le comportement était différent, this.focus() s'exécute mais la zone de texte ne reçoit pas le focus. À ce stade, je me demande si cette stratégie est bonne ou non. Qu'est-ce que tu ferais?

interaction-designuser-expectationvalidationerrorsinput-focus
1
Pablo

À mon avis:

  1. Ne volez pas le focus

  2. N'empêchez pas l'utilisateur de saisir une entrée, par ex. copier et coller, puis corriger

  3. Validez immédiatement, n'attendez pas la perte de concentration

Les raisons:

  1. L'utilisateur finira par essayer d'entrer une entrée ailleurs et de la faire atteindre le mauvais endroit ou se perdre

  2. L'utilisateur peut essayer de copier un numéro à partir d'un endroit qui sélectionne également les espaces, par exemple Word ou essayez de saisir une entrée initialement non valide, par exemple "-" puis ajoutez 1 et atteignez une entrée entière valide "-1". (Idem pour les nombres flottants, où 1e n'est pas valide, mais 1e3 est valide (= 1000)).

  3. Donnez aux utilisateurs des commentaires précoces et non intrusifs pendant que leur attention se porte sur le champ de saisie pertinent. Par exemple. un commentaire rouge après le champ de saisie.

1
Danny Varod