Comment définir le focus sur le champ d'entrée à l'aide de JQuery

106

Compte tenu de la structure HTML suivante:

<div class="wrapper">
    <div class="top">
        <a href="http://example.com" class="link">click here</a>
    </div>
    <div class="middle">
        some text
    </div>
    <div class="bottom">
        <form>
            <input type="text" class="post">
            <input type="submit">
        </form>
    </div>
<div>

qui sera répété plusieurs fois sur la page, comment définir le focus sur le champ de saisie dans le .bottomdiv lorsqu'un utilisateur clique sur le lien dans le .topdiv?

Je fais actuellement .bottomapparaître le div avec succès sur clic en utilisant le code JQuery ci-dessous, mais je n'arrive pas à comprendre comment définir le focus sur le champ de saisie en même temps.

$('.link').click(function() {
    $(this).parent().siblings('div.bottom').show();
});

Merci!

jquery html

— Pierre roulante
source

Votre question a été répondue, mais aussi: je suppose que vous exécutez également return false;à la fin du rappel d'événement? Ou function(e) { e.preventDefault(); ..... }? Sinon, votre navigateur naviguera simplement vers cette page après avoir exécuté le rappel.

— simshaun

@simshaun accéder à quelle page?

— Rolling Stone

Eh bien, dans votre exemple, lorsque vous cliquez sur ce lien, il ira à example.com .

— simshaun

oh, c'est vrai, merci pour la tête!

— Rolling Stone

Réponses:

135

Essayez ceci, pour définir le focus sur le premier champ de saisie:

$(this).parent().siblings('div.bottom').find("input.post").focus();

— Justin Ethier
source

Espace entre input& :first. JQuery joint-t-il cela automatiquement? J'ai toujours pensé que ça devrait l'être input:first.

— simshaun

Oui, vous pouvez l'écrire de toute façon. Je suppose que c'est input:firstpeut-être la manière la plus formelle de l'écrire, même si cela semble plus facile à lire dans l'autre sens. Mais peut-être que c'est juste moi :)

— Justin Ethier

Je suppose que parce que j'y suis tellement habitué, quand je vois l'espace, je pense automatiquement "élément enfant" et il faut une seconde pour me désembrouiller. Mais bon, c'est juste moi. C'est cool que cela fonctionne de toute façon.

— simshaun

@justin j'ai en fait dû le modifier un peu pour le faire fonctionner: $(this).parent().siblings('div.bottom').find("input.post").focus();mais .find()c'est le sélecteur que je recherchais. Intéressant input :firstni input:firsttravaillé.

— Rolling Stone

Intéressant, probablement parce que l'entrée se trouve dans une formbalise. Quoi qu'il en soit, content que vous alliez travailler!

— Justin Ethier

Si l'entrée se trouve dans une boîte de dialogue modale bootstrap, la réponse est différente. Copier de Comment définir le focus vers la première entrée de texte dans un modal bootstrap après avoir montré ce qui est nécessaire:

$('#myModal').on('shown.bs.modal', function () {
  $('#textareaID').focus();
})

— Kevin Buchs
source

La réponse de Justin n'a pas fonctionné pour moi (Chromium 18, Firefox 43.0.1). jQuery .focus()crée une surbrillance visuelle, mais le curseur de texte n'apparaît pas dans le champ (jquery 3.1.0).

Inspiré par https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , j'ai ajouté l' attribut autofocus au champ de saisie et le tour est joué!

function addfield() {
    n=$('table tr').length;
    $('table').append('<tr><td><input name=field'+n+' autofocus></td><td><input name=value'+n+'></td></tr>');
    $('input[name="aa"'+n+']').focus();
}

— MKaama
source

A travaillé pour moi. La version plus simple est comme ceci: $ ('. Class input'). Focus (); $ ('. entrée de classe'). prop ('autofocus');

— raison