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

106

Учитывая следующую структуру 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>

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

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

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

Спасибо!

jquery html

— катящийся камень
источник

На ваш вопрос был дан ответ, но также: я предполагаю, что вы также выполняете return false;в конце обратного вызова события? Или function(e) { e.preventDefault(); ..... }? Если нет, ваш браузер просто перейдет на эту страницу после выполнения обратного вызова.

— simshaun

@simshaun перейти на какую страницу?

— Rolling

Что ж, в вашем примере, когда вы нажимаете эту ссылку, она переходит на example.com .

— simshaun

о, верно, спасибо за внимание!

— Rolling

Ответы:

135

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

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

— Джастин Этье
источник

Пробел между input& :first. Связывает ли jQuery это автоматически? Я всегда думал, что так и должно быть input:first.

— simshaun

Да, вы можете написать в любом случае. Я полагаю, что это input:firstможет быть более формальный способ написать это, хотя кажется, что легче читать по-другому. Но, может быть, это только я :)

— Джастин Этье

Думаю, потому что я так привык к этому, когда я вижу пространство, я автоматически думаю, что это «дочерний элемент», и мне требуется секунда, чтобы избавиться от путаницы. Но эй, это только я. Круто, что так или иначе работает.

— simshaun

@justin мне действительно пришлось немного подправить его, чтобы он заработал: $(this).parent().siblings('div.bottom').find("input.post").focus();но .find()это тот селектор, который я искал. Интересно input :firstни input:firstсработало.

— Rolling

Интересно, вероятно, потому, что ввод находится внутри formтега. В любом случае, рад, что вы взяли его на работу!

— Justin Ethier

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

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

— Кевин Бакс
источник

Ницца! Именно то, что мне было нужно, и я отлаживал пару часов, пробовал задержку и всякие хаки ... :-)

— Ким Лундберг Стегенборг Мэдсен

Ответ Джастина не сработал для меня (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();
}

— MKaama
источник

Работал у меня. Более простая версия выглядит так: $ ('. Class input'). Focus (); $ ('. вход класса'). prop ('автофокус');

— raison