web-dev-qa-db-fra.com

jQuery se concentre dynamiquement sur le premier INPUT ou Textarea

Voici une question délicate pour commencer la matinée.

J'ai une série d'icônes. Lorsque vous cliquez sur une icône, elle charge un formulaire. Certains des formulaires ont une entrée [texte], d'autres ont une zone de texte.

Ce que j'essaie de dire, c’est jQuery qu’une fois que j’ai chargé le formulaire que je peux exécuter, ce sera ... Concentrez-vous sur la première entrée ou textarea de quelque manière que ce soit, dynamiquement pour ne pas avoir besoin de blocs.

Des idées?

jqueryjquery-selectors
25
TheExit

Cela devrait le faire je pense

$("#formId input:text, #formId textarea").first().focus();
62
Onkelborg

C'est ici:

$('#form-id :input:enabled:visible:first').focus();

# id-formulaire est l'ID du formulaire; : input sélectionne les éléments input et textarea; : enabled s'assure que l'entrée est éditable; : viisble s'assure que l'élément est visible; : le premier est évident

39
Viliam
$(":input:first").focus();

Le sélecteur :input saisit tous les éléments d’entrée, textarea, select et button.

10
Tom Brothers

une partie de votre code serait bien .. mais cela devrait être facile.

en supposant que votre chargement soit dans une div dont vous connaissez l'identifiant ....

tout ce que vous avez à faire est quelque chose comme 

$('#TheIdOfYourFormDiv').find('input, textarea').first().focus()

après avoir chargé votre formulaire

9
Patricia

MODIFIER

Ce n'est en fait pas une si bonne solution. Les solutions de Patricia et Onkelborg ci-dessous sont beaucoup plus élégantes.

var $firstInput = jQuery("input:first");
var $firstTextArea = jQuery("textarea:first");

if(firstInput.length == 0) {
  $firstTextArea.focus();
}

else {
  $firstInput.focus();
}
4
Vivin Paliath

Voici une solution pour les modaux bootstrap développés par @craztmatt et d’autres. J'ai étendu pour que la sélection de l'élément cible commence au modal qui a déclenché l'événement. Celui-ci attrape les entrées, textarea ET sélection des éléments.

// do this to make bootstrap modals auto-focus.
// delegate to body so that we only have to set it up once.
$('body').on('shown.bs.modal', function (e) {
    var ele = $(e.target).find('input[type=text],textarea,select').filter(':visible:first'); // find the first input on the bs modal
    if (ele) {ele.focus();} // if we found one then set focus.
})

Pas précisément la question du PO mais devrait être adaptable à un cas purement jQuery aussi.

1
Vanquished Wombat

Cela fonctionne pour moi dans l'événement de chargement.

$('#Div').find('input:first').focus();
1
Nalan Madheswaran

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

  • obtenir toutes les entrées, sélections et textareas 
  • filtrer tous les boutons et champs cachés 
  • filtrer uniquement sur les champs visibles 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 votre sélecteur.

Sélecteur:

focusFirst('#parentId');

Élément:

var el = $('#parentId');
focusFirst(el);
1
J Adam Rogers

Parce que: visible est une extension jQuery et ne fait pas partie des CSS spécification, les requêtes utilisant: visible ne peuvent pas tirer parti du amélioration des performances fournie par le DOM natif querySelectorAll () méthode. Pour obtenir les meilleures performances lors de l’utilisation de: visible pour sélectionner éléments, sélectionnez d’abord les éléments en utilisant un pur sélecteur CSS, puis utilisez .filter (": visible").

Utilisez à la place:

$('form').filter(':input:first').focus();

ou:

$('input').first().focus(); //as shown in the "correct" answer.

Gardez également à l’esprit lorsque vous utilisez .focus()

Tenter de définir le focus sur un élément masqué provoque une erreur dans Internet Explorer. Veillez à n'utiliser que .focus () sur des éléments qui sont visible. Pour exécuter les gestionnaires d'événements de focus d'un élément sans définir se concentrer sur l'élément, utilisez .triggerHandler ("focus") au lieu de .concentrer().

0
darcher