Как настроить фокус на поле ввода с помощью JQuery

Учитывая следующую структуру HTML:

<div class="wrapper">
    <div class="top">
        <a href="#" onclick="location.href='http://example.com'; return false;" 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>

который будет повторяться несколько раз на странице, как установить фокус на поле ввода в div .bottom, когда пользователь нажимает на ссылку в .top div?

В настоящее время я делаю div .bottom успешным нажатием, используя код JQuery ниже, но не могу понять, как установить фокус на поле ввода в одно и то же время.

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

Спасибо!

Ответ 1

Попробуйте это, чтобы установить фокус на первое поле ввода:

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

Ответ 2

Ответ Джастина у меня не сработал (Chromium 18, Firefox 43.0.1). jQuery .focus() создает визуальное выделение, но текстовый курсор не появляется в поле (jquery 3.1.0).

Вдохновленный https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/, я добавил атрибут автофокуса в поле ввода и вуаля!

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();
}

Ответ 3

Если ввод происходит в модальном диалоговом окне начальной загрузки, ответ будет другим. Копирование из Как установить фокус на первый ввод текста в модале начальной загрузки после показа, вот что требуется:

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

Ответ 4

$('input').attr('autofocus', 'true');