Focalisation du premier contrôle dans le formulaire à l'aide de jquery

Question

En utilisant jquery, comment puis-je mettre en évidence le premier élément (champ d'édition, zone de texte, champ de liste déroulante, etc.) dans le formulaire au chargement de la page ?

Quelque chose comme :

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

mais en utilisant jquery.

Une autre exigence, ne pas mettre en avant le premier élément lorsque le formulaire a class="filter".

Answer 1

$('form:not(.filter) :input:visible:enabled:first').focus()

Ceci sélectionnera le premier élément d'entrée visible ( <input /> , <select> , <textarea> ) qui n'a pas la classe filter en elle.

Answer 2

Pour le fond, j'ai utilisé le script en ruby on rails app. Après avoir essayé toutes vos réponses, j'ai découvert qu'elles étaient toutes ne fonctionne pas , J'ai cherché un peu et j'ai trouvé ce bout de texte qui travaux :

$(function() {
  $("form:not(.filter) :input:visible:enabled:first").focus();
});

Il s'avère que $('form :input:first') correspond à l'entrée cachée que rails insérer sur chaque formulaire.

Answer 3

J'aime marquer l'élément que je choisis d'une classe et le sélectionner par classe plutôt que de m'en remettre à l'ordre des éléments de la page. Je trouve cela beaucoup plus facile que d'essayer de me souvenir de mettre à jour mon algorithme "quel est le vrai premier élément" lorsque je sélectionne des éléments qui peuvent ou non être cachés, peuvent ou non être injectés par le framework, ...

  $(document).ready( function() {
     $('input.js-initial-focus:first').focus(); // choose first just in case
  });

Answer 4

Il ne s'agit pas d'une solution unique, mais elle prend en compte les éléments suivants réel le premier champ de saisie de l'utilisateur (qu'il s'agisse de la balise <input /> ou <select>).

Il suffit de l'ajuster un peu plus pour obtenir ce dont vous avez besoin.

P.S : J'ai testé ce code qui fonctionne dans FireFox, Chrome et IE6.

function focusFirstFormField() {
    try {
        var selector = $("#formid");
        if (selector.length >= 1 && selector[0] && selector[0].elements && selector[0].elements.length > 0) {
            var elements = selector[0].elements;
            var length = elements.length;
            for (var i = 0; i < length; i++) {
                var elem = elements[i];
                var type = elem.type;

                // ignore images, hidden fields, buttons, and submit-buttons
                if (elem.style.display != "none" /* check for visible */ && type != "image" && type != "hidden" && type != "button" && type != "submit") {
                    elem.focus();
                    break;
                }
            }
        }
    }
    catch(err) { /* ignore error if any */ }
}

Answer 5

J'ai eu quelques problèmes avec des boîtes de dialogue jQuery qui étaient invisibles sur la page mais étaient toujours sélectionnées par le sélecteur :

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

Après avoir beaucoup joué, j'ai finalement trouvé une solution qui exclut toutes les entrées dans les divs avec une classe de .dialog en ajoutant un ".not()" à la fin. Cela peut être utile à quelqu'un d'autre. Voici mon sélecteur :

$(":text:visible:enabled:first").not("div .dialog input").focus();