web-dev-qa-db-fra.com

Comment définir le focus sur le premier élément d'entrée dans un formulaire HTML indépendant de l'id?

Y at-il un moyen simple de définir le focus (curseur de saisie) d’une page Web sur le premier élément d’entrée (zone de texte, liste déroulante, ...) lors du chargement de la page sans avoir à connaître l’identifiant l'élément?

Je voudrais l'implémenter comme un script commun pour toutes mes pages/formes de mon application web.

javascripthtmlformsfocus
81
splattne

Vous pouvez également essayer une méthode basée sur jQuery:

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});
96
Marko Dumic

Bien que cela ne réponde pas à la question (nécessitant un script commun), j’ai pensé qu’il pourrait être utile pour d’autres de savoir que HTML5 introduit l’attribut «autofocus»:

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

Plongez dans HTML5 a plus d'informations.

125
Jacob Stanley
document.forms[0].elements[0].focus();

Cela peut être affiné en utilisant une boucle pour, par exemple. ne pas cibler certains types de champs, les champs désactivés, etc. Mieux vaut peut-être ajouter un class = "autofocus" au champ sur lequel vous voulez do vous concentrer, et effectuer une boucle sur les formulaires [i] .elements [j] à la recherche de ce className.

Quoi qu'il en soit: ce n'est normalement pas une bonne idée de faire cela à chaque page. Lorsque vous faites une mise au point, l’utilisateur perd sa capacité, par exemple. faites défiler la page à partir du clavier. Si cela est inattendu, cela peut être ennuyeux. Par conséquent, effectuez une mise au point automatique uniquement lorsque vous êtes certain de l’utilisation du champ de formulaire que l’utilisateur souhaite faire. c'est à dire. si vous êtes Google.

27
bobince

L'expression jQuery la plus complète que j'ai trouvée en travaillant est (avec l'aide de over here )

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});
17
ngeek

Si vous utilisez le framework Prototype JavaScript, vous pouvez utiliser la méthode focusFirstElement :

Form.focusFirstElement(document.forms[0]);
7
John Topley

Voici une description qui pourrait être utile: Définir le focus comme première entrée sur la page Web

6
Galwegian

Vous devez également ignorer les entrées masquées.

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
5
Marko Dumic

J'ai essayé beaucoup de réponses ci-dessus et elles ne fonctionnaient pas. Trouvé celui-ci à l'adresse: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Merci Kolodvor 

$("input:text:visible:first").focus();
3
Max West

Si vous placez ce code à la fin de votre balise body, le premier élément activé visible et non masqué sera automatiquement activé. Il traitera la plupart des cas que je peux présenter avec un court préavis.

<script>
    (function(){
        var forms = document.forms || [];
        for(var i = 0; i < forms.length; i++){
            for(var j = 0; j < forms[i].length; j++){
                if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
                    forms[i][j].focus();
                    return;
                }
            }
        }
    })();
</script>
3
James Hughes

Cela obtient la première des entrées communes visibles, y compris textareas et les zones de sélection. Cela garantit également qu'ils ne sont pas cachés, désactivés ou en lecture seule. cela permet aussi une div cible, que j'utilise dans mon logiciel (c'est-à-dire, la première entrée à l'intérieur de ce formulaire).

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();
2
Dave K

J'utilise ceci:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
2
Robert Brooker

Pour ceux qui utilisent JSF2.2 + et ne peuvent pas transmettre l'autofocus en tant qu'attribut sans valeur, utilisez ceci:

 p:autofocus="true"

Et ajoutez-le à l'espace de noms p (Aussi souvent utilisé pt. Tout ce que vous aimez).

<html ... xmlns:p="http://Java.Sun.com/jsf/passthrough">
1
feder

Cela inclut textareas et exclut les boutons radio

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});
0
HectorPerez

Sans les bibliothèques tierces, utilisez quelque chose comme

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }

Assurez-vous de prendre en compte toutes les balises d'éléments de formulaire, excluez celles qui sont masquées/désactivées comme dans les autres réponses, etc.

0
cghislai

Avec AngularJS:

angular.element('#Element')[0].focus();
0
EpokK

sans jquery, par ex. avec javascript classique:

document.querySelector('form input:not([type=hidden])').focus()

fonctionne sur Safari mais pas sur Chrome 75 (avril 2019)

0
localhostdotdev

Vous devriez pouvoir utiliser clientHeight au lieu de rechercher l'attribut display, car un parent pourrait cacher cet élément:

function setFocus() {
    var forms = document.forms || [];
        for (var i = 0; i < forms.length; i++) {
            for (var j = 0; j < forms[i].length; j++) {
            var widget = forms[i][j];
                if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
                 && (typeof widget.disabled === "undefined" || widget.disabled === false)
                 && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
                        widget.focus();
                        break;
                }
            }
        }
    }   
}
0
thecoolmacdude