jQuery: comment trouver la première entrée / sélection / zone de texte visible à l'exclusion des boutons?

87

j'ai essayé

$(":input:not(input[type=button],input[type=submit],button):visible:first")

mais il ne trouve rien.

Quelle est mon erreur?

UPD: J'exécute ceci sur $ (document) .load ()

<script type="text/javascript">
$(window).load(function () {
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

et dans le débogage, je peux voir que firstInput est vide.

UPD2: Je suis dans la page ASP.NET fonctionnant sous Sharepoint.

J'ai trouvé jusqu'à présent que pour certains éléments, il les trouve (pour les fixes) et pour certains pas. :(

jquery input jquery-selectors

— Artem
source

Essayez "input" au lieu de ": input"?

— Alec

Cela devrait fonctionner correctement. Votre problème se situe ailleurs. Ne vous exécutiez ce avant l' $(document)est ready()?

— BalusC

Avez-vous un code HTML spécifique à rechercher?

— Shiki

Peut-être que la première entrée est de type="hidden"? Cliquez avec le bouton droit sur la page et affichez la source. Le HTML généré est également important. Sans lui et sans un SSCCE approprié , il filme dans le noir.

— BalusC

166

Pourquoi ne pas cibler uniquement ceux que vous voulez ( démo )?

$('form').find('input[type=text],textarea,select').filter(':visible:first');

Éditer

Ou utilisez jQuery : input selector pour filtrer les descendants des formulaires.

$('form').find('*').filter(':input:visible:first');

— Mottie
source

5

Case à cocher? Radio? Mot de passe? Sans parler du grand nombre de nouveaux types d'entrées HTML5.

— BalusC

9

@BalusC $ ('form'). Find (': input'). Filter (': visible: first')

— Abe Petrillo

1

Bien que cela fonctionne dans une certaine mesure, il ignore l'attribut tabindex.

— eoleary

2

Petit pinailleur mais ajout utile: au lieu de ': visible: first', ': visible: enabled: first' sera un bien meilleur filtre car l'élément supérieur pourrait être désactivé dans certains cas et le focus ne peut pas s'y déplacer.

— Prahlad Yeri le

1

@PrahladYeri Peut-être aussi exclure en lecture seule':input:visible:enabled:not([readonly]):first'

— JustinStolle

13

Le code JQuery est très bien. Vous devez exécuter dans le gestionnaire prêt et non dans l'événement de chargement de fenêtre.

<script type="text/javascript">
$(function(){
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

Mise à jour

J'ai essayé avec l'exemple de Karim79 (merci pour l'exemple) et cela fonctionne très bien: http://jsfiddle.net/2sMfU/

— PeterDeCologne
source

3

Merci @BalusC. Je vais aller me tirer une balle maintenant. Je me hais. J'aurais pu passer la dernière heure à ne pas jouer avec le code de travail. J'aurais pu nourrir mes chiens, nettoyer ma cuisine. Il y a beaucoup de choses que j'aurais pu accomplir. Maintenant, tout ce que j'ai, c'est la douleur. Au revoir, pour toujours .... Et oui, je devrais avoir écouté.

— karim79

@karim: rofl. De rien :) Btw: J'ai déjà baigné mes enfants, les ai mis au lit, nourri les chiens et les chats et me suis pris un coca cola;)

— BalusC

7

Ceci est mon résumé de ce qui précède et fonctionne parfaitement pour moi. Merci pour l'info!

<script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        var firstInput = $('form').find('input[type=text],input[type=password],input[type=radio],input[type=checkbox],textarea,select').filter(':visible:first');
        if (firstInput != null) {
            firstInput.focus();
        }
    });
</script>

— Ben Foster
source

3

C'est une amélioration par rapport à la réponse de @ Mottie car à partir de jQuery 1.5.2 :textsélectionne les inputéléments qui n'ont pas d' typeattribut spécifié (auquel cas type="text"est implicite):

$('form').find(':text,textarea,select').filter(':visible:first')

— Mike Slinn
source

1

Voici ma solution. Le code devrait être assez simple à suivre mais voici l'idée:

obtenir toutes les entrées, sélections et zones de texte
filtrer tous les boutons et champs masqués
filtrer uniquement sur les champs visibles et activés
sélectionnez le premier
concentrer le champ sélectionné

Le code:

function focusFirst(parent) {
    $(parent).find('input, textarea, select')
        .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button')
        .filter(':enabled:visible:first')
        .focus();
}

Ensuite, appelez simplement focusFirst avec votre élément parent ou sélecteur.

Sélecteur:

focusFirst('form#aspnetForm');

Élément:

var el = $('form#aspnetForm');
focusFirst(el);

— J Adam Rogers
source

0

Vous pouvez essayer le code ci-dessous ...

$(document).ready(function(){
    $('form').find('input[type=text],textarea,select').filter(':visible:first').focus();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
    
<input type="submit" />
</form>

Développer l'extrait

— Mahbub
source