Jak ustawić fokus na polu wejściowym za pomocą JQuery

106

Biorąc pod uwagę następującą strukturę HTML:

<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>

który będzie powtarzany kilka razy na stronie, jak ustawić fokus na polu wejściowym w .bottomdiv, gdy użytkownik kliknie łącze w .topdiv?

Obecnie .bottomsprawiam, że element DIV pojawia się pomyślnie po kliknięciu, używając poniższego kodu JQuery, ale nie mogę dowiedzieć się, jak jednocześnie ustawić fokus na polu wejściowym.

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

Dzięki!

jquery html toczący się kamień
źródło
Twoje pytanie zostało udzielone, ale także: Zakładam, że wykonujesz również return false;wywołanie zwrotne na koniec zdarzenia? Albo function(e) { e.preventDefault(); ..... }? Jeśli nie, Twoja przeglądarka po prostu przejdzie do tej strony po wykonaniu wywołania zwrotnego.
simshaun
@simshaun przejść do której strony?
toczący się kamień
W Twoim przykładzie kliknięcie tego linku spowoduje przejście do witryny example.com .
simshaun
och, zgadza się, dzięki za ostrzeżenie!
toczący się kamień

Odpowiedzi:

135

Spróbuj tego, aby ustawić fokus na pierwsze pole wejściowe:

$(this).parent().siblings('div.bottom').find("input.post").focus();
Justin Ethier
źródło
1
Odstęp między input& :first. Czy jQuery łączy to automatycznie? Zawsze myślałem, że tak powinno być input:first.
simshaun
Tak, możesz to napisać w dowolny sposób. Przypuszczam, że input:firstmoże to być bardziej formalny sposób zapisania tego, chociaż wydaje się, że łatwiej jest go przeczytać w inny sposób. Ale może to tylko ja :)
Justin Ethier
Wydaje mi się, że ponieważ jestem do tego przyzwyczajony, kiedy widzę przestrzeń, automatycznie myślę o „elemencie dziecięcym” i potrzebuję sekundy, aby się zmylić. Ale hej, to tylko ja. Fajnie, że tak czy inaczej działa.
simshaun
@justin Właściwie musiałem go trochę poprawić, aby działał: $(this).parent().siblings('div.bottom').find("input.post").focus();ale .find()jest to selektor, którego szukałem. Co ciekawe, input :firstnie input:firstzadziałało.
toczący się kamień
Ciekawe, prawdopodobnie dlatego, że dane wejściowe znajdują się w formtagu. W każdym razie, cieszę się, że bierzesz się do pracy!
Justin Ethier
7

Odpowiedź Justina nie działa dla mnie (Chromium 18, Firefox 43.0.1). jQuery .focus()tworzy wizualne wyróżnienie, ale kursor tekstowy nie pojawia się w polu (jQuery 3.1.0).

Zainspirowany https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , dodałem atrybut autofocus do pola wprowadzania i voila!

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
źródło
1
Pracował dla mnie. Prostsza wersja jest taka: $ ('. Wejście klasy'). Focus (); $ ('. class input'). prop ('autofocus');
raison