Учитывая следующую структуру 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>
который будет повторяться несколько раз на странице, как мне установить фокус на поле ввода в .bottom
div, когда пользователь нажимает ссылку в .top
div?
В настоящее время я делаю так, чтобы .bottom
div успешно появлялся при нажатии, используя приведенный ниже код JQuery, но не могу понять, как одновременно установить фокус на поле ввода.
$('.link').click(function() {
$(this).parent().siblings('div.bottom').show();
});
Спасибо!
return false;
в конце обратного вызова события? Илиfunction(e) { e.preventDefault(); ..... }
? Если нет, ваш браузер просто перейдет на эту страницу после выполнения обратного вызова.Ответы:
Попробуйте это, чтобы установить фокус на первое поле ввода:
источник
input
&:first
. Связывает ли jQuery это автоматически? Я всегда думал, что так и должно бытьinput:first
.input:first
может быть более формальный способ написать это, хотя кажется, что легче читать по-другому. Но, может быть, это только я :)$(this).parent().siblings('div.bottom').find("input.post").focus();
но.find()
это тот селектор, который я искал. Интересноinput :first
ниinput:first
сработало.form
тега. В любом случае, рад, что вы взяли его на работу!Если ввод происходит в модальном диалоговом окне начальной загрузки, ответ будет другим. Копирование из раздела Как установить фокус на первый ввод текста в модальном окне начальной загрузки после показа вот что требуется:
источник
Ответ Джастина не сработал для меня (Chromium 18, Firefox 43.0.1). jQuery
.focus()
создает визуальную подсветку, но текстовый курсор не отображается в поле (jquery 3.1.0).Вдохновленный https://www.sitepoint.com/jqueryhtml5-input-focus-cursor-positions/ , я добавил атрибут автофокуса в поле ввода и вуаля!
источник