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

Existe-t-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'id de l'élément?

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

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

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

Bien que cela ne réponde pas à la question (nécessitant un script commun), je pensais 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 pour plus d'informations.

document.forms[0].elements[0].focus();

Cela peut être affiné en utilisant une boucle par exemple. ne pas concentrer certains types de champs, les champs désactivés, etc. Mieux peut - être ajouter une classe = « mise au point automatique » au champ que vous avez réellement ne veulent concentré et boucle sur les formes [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 sur chaque page. Lorsque vous vous concentrez sur une entrée, l'utilisateur perd la capacité d'ex. faites défiler la page à partir du clavier. Si cela est inattendu, cela peut être ennuyeux, alors la mise au point automatique ne se fait que lorsque vous êtes certain que l'utilisation du champ de formulaire sera ce que l'utilisateur souhaite faire. c'est à dire. si vous êtes Google.

L'expression jQuery la plus complète que j'ai trouvée fonctionne est (à l'aide de ici )

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

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

Form.focusFirstElement(document.forms[0]);

Il y a un article ici qui peut être utile: Définir le focus sur la première entrée sur la page Web

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

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

Mettre ce code à la fin de votre bodybalise focalisera automatiquement le premier élément activé visible et non masqué sur l'écran. Il traitera la plupart des cas que je peux proposer à 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>

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

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

J'utilise ceci:

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

Cela obtient la première de toute entrée commune visible, y compris les zones de texte et les zones de sélection. Cela garantit également qu'ils ne sont pas masqués, désactivés ou en lecture seule. il permet également un div cible, que j'utilise dans mon logiciel (c'est-à-dire, 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();

Pour ceux qui utilisent JSF2.2 + et ne peuvent pas passer 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 voulez).

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">

Avec AngularJS:

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

Cela inclut les zones de texte 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(); }
});

Vous devriez pouvoir utiliser clientHeight au lieu de vérifier l'attribut d'affichage, car un parent pourrait masquer 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;
                }
            }
        }
    }   
}

Sans 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ément de formulaire, excluez les balises masquées / désactivées comme dans les autres réponses, etc.

sans jquery, par exemple avec javascript classique:

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

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