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

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

Jeśli dane wejściowe znajdują się w modalnym oknie dialogowym ładowania początkowego, odpowiedź jest inna. Kopiowanie z Jak ustawić fokus do pierwszego wprowadzenia tekstu w trybie bootstrap po pokazaniu, jest to, co jest wymagane:

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

— Kevin Buchs
źródło

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

Pracował dla mnie. Prostsza wersja jest taka: $ ('. Wejście klasy'). Focus (); $ ('. class input'). prop ('autofocus');

— raison