Как установить фокус на первый элемент ввода в форме HTML независимо от идентификатора?
Есть ли простой способ установить фокус (курсор ввода) веб-страницы на первом элементе ввода (текстовое поле, раскрывающийся список, ...) при загрузке страницы без необходимости знать идентификатор элемента?
Я хотел бы реализовать его как общий скрипт для всех моих страниц / форм моего веб-приложения.
@Marco_Demaio Мое веб-приложение структурировано таким образом, что на каждой странице есть поля ввода в верхней части окна.
что, если бы пользователь изменил размер окна браузера до значения менее 768 пикселей. Страница будет прокручиваться до того места, где вы установили фокус. В любом случае, я хотел только предупредить вас на случай, если вы не знали о такой незначительной проблеме, я тоже не знал об этом до проведения некоторых тестов.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 18
Здесь есть запись, которая может быть полезна: Установите фокус на первый ввод на веб-странице
document.forms[0].elements[0].focus();
Это можно уточнить, используя цикл, например. не фокусировать определенные типы полей, отключенные поля и так далее. Возможно, лучше добавить class = "autofocus" в поле, на которое вы действительно хотите сфокусировать делать, и перебрать формы [i] .elements [j] в поисках этого className.
В любом случае: обычно не рекомендуется делать это на каждой странице. Когда вы фокусируете ввод, пользователь теряет возможность, например. прокрутите страницу с клавиатуры. Если неожиданно, это может раздражать, поэтому автоматическая фокусировка только тогда, когда вы уверены, что использование поля формы будет тем, что пользователь хочет сделать. т.е. если вы Google.
Должен быть правильный ответ, потому что вопрос не имеет тега jquery.
@ KalleH.Väravas нет, за него следует проголосовать против, потому что он делает предположения, которые нигде не подлежат сомнению, например. есть хотя бы одна форма. Как правило, это не работает.
Вам также нужно пропустить любые скрытые входы.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
Возможно, я ошибаюсь, но этот цикл не имеет определенного поведения, если form [0] не имеет скрытых входов.
Точно. Он используется для пропуска любых ведущих скрытых входов. Причем написано в предположении, что в форме есть не скрытые поля. Я мог бы сделать это и с jQuery (я отправлю другой ответ), но вы не упомянули, что хотите задействовать jQuery.
@MarkoDumic Зачем тратить память, если можно использовать оператор while?
Если вы используете фреймворк Прототип JavaScript, вы можете использовать метод focusFirstElement:
Form.focusFirstElement(document.forms[0]);
Помещение этого кода в конец вашего тега body автоматически сфокусирует первый видимый, не скрытый активированный элемент на экране. Он справится с большинством случаев, которые я могу придумать в короткие сроки.
<script>
(function(){
var forms = document.forms || [];
for(var i = 0; i < forms.length; i++){
for(var j = 0; j < forms[i].length; j++){
if (!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
forms[i][j].focus();
return;
}
}
}
})();
</script>
Здесь следует учитывать, что он может соответствовать элементам, которые сами по себе не скрыты, но есть их предок. Это потребует отслеживания DOM и проверки видимости каждого предка, что, на мой взгляд, является серьезным излишеством для такого рода ситуаций.
А как насчет <input type = "text" readonly = "readonly"> Думаю, вам следует добавить такой случай в свой код. Обычно люди не хотят фокусироваться на текстовом поле, предназначенном только для чтения. В любом случае хороший код и +1 спасибо!
Не тестировалось, но я обновил его с помощью !forms [i] [j] .readonly! = Undefined
Вы также можете попробовать метод на основе jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Оно работает! Я начинаю интегрировать jQuery в свое веб-приложение. Итак, я думаю, что буду придерживаться этого подхода! Большое спасибо, Марко!
Что будет, если в этом случае первая форма на странице будет скрыта? Или если первый элемент формы скрыт через CSS? Конечно, это не удастся. Я, конечно, педантичен, но вот как я катаюсь.
В моем случае (с использованием ASP.NET) у меня есть только ОДНА форма, которая никогда не скрывается. Так что это работает для меня.
@Jame Hughes, вы можете написать его как функцию и вызывать ее, когда вам это нужно, и вы можете делать исключения. Мне это решение действительно помогло.
у меня это по какой-то причине не работает. я не должен видеть курсор.
@AdonisSMU Пожалуйста, вставьте куда-нибудь свой HTML.
Этой немного более простой версии должно хватить: $(':input[type!=hidden]:first').focus()
Наиболее полное выражение jQuery, которое я нашел работающим, - это (с помощью более здесь)
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Я использовал это, заметил, что он работает очень медленно в IE, когда в таблице имеется большое количество> 1000 флажков. Не уверен, что с этим делать, возможно, придется просто отказаться от фокусировки на первом поле ввода.
Хотя это не отвечает на вопрос (требуется общий сценарий), я, хотя другим может быть полезно знать, что HTML5 вводит атрибут «автофокус»:
<form>
<input type = "text" name = "username" autofocus>
<input type = "password" name = "password">
<input type = "submit" value = "Login">
</form>
У Погрузитесь в HTML5 есть дополнительная информация.
автофокус - это имя атрибута. Как насчет его значения? Что-то вроде autofocus = true не нужно? Что значит не устанавливать никакого значения?
В HTML5 некоторые атрибуты не обязательно должны иметь значение, «checked» - еще один атрибут, в котором это так. Я считаю, что когда значение не указано, подразумевается, что оно совпадает с именем (например, autofocus = "autofocus" и checked = "checked").
Мое приложение Spring ломается, когда я пытаюсь использовать autofocus без значения на spring:form. Хотя autofocus = "autofocus" работает нормально. Спасибо, @Jacob.
@Geek Атрибут autofocus, как и многие другие, является логическим типом атрибута. Вот почему он используется только декларативно, а не путем присвоения ему значения. См. Более подробную информацию в спецификации w3c: w3.org/TR/html5/infrastructure.html#boolean-attribute
Обратите внимание, что это, похоже, не работает само по себе для ввода, который изначально скрыт, например в модальном всплывающем окне начальной загрузки, потому что атрибут обрабатывается, когда элемент вставляется в DOM, и в этот момент он все еще скрыт и, следовательно, не может быть сфокусирован. См. этот ответ
Он получает первый из всех видимых общих входных данных, включая текстовые поля и поля выбора. Это также гарантирует, что они не будут скрыты, отключены или доступны только для чтения. он также позволяет использовать целевой div, который я использую в своем программном обеспечении (т. е. первый ввод внутри этой формы).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
Пробовал много ответов выше, и они не работали. Нашел это по адресу: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Спасибо, Колодвор.
$("input:text:visible:first").focus();
Я использую это:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
С AngularJS:
angular.element('#Element')[0].focus();
Это включает текстовые поля и исключает переключатели
$(document).ready(function() {
var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
if (first_input != undefined){ first_input.focus(); }
});
Для тех, кто использует JSF2.2 + и не может передать автофокус в качестве атрибута без значения, используйте это:
p:autofocus = "true"
И добавьте его в пространство имен p (Также часто используется pt. Как хотите).
<html ... xmlns:p = "http://java.sun.com/jsf/passthrough">
Вы должны иметь возможность использовать clientHeight вместо проверки атрибута display, поскольку родительский элемент может скрывать этот элемент:
function setFocus() {
var forms = document.forms || [];
for (var i = 0; i < forms.length; i++) {
for (var j = 0; j < forms[i].length; j++) {
var widget = forms[i][j];
if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
&& (typeof widget.disabled === "undefined" || widget.disabled === false)
&& (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
widget.focus();
break;
}
}
}
}
}
Без сторонних библиотек используйте что-то вроде
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
Убедитесь, что вы учли все теги элементов формы, исключили скрытые / отключенные, как в других ответах, и т. д.
без jquery, например с обычным javascript:
document.querySelector('form input:not([type=hidden])').focus()
работает в Safari, но не в Chrome 75 (апрель 2019 г.)
Мне нужно было решить эту проблему для формы, которая динамически отображается в модальном div на моей странице, и, к сожалению, autofocus не соблюдается, когда содержащий div отображается путем изменения свойства display (по крайней мере, не в Chrome). Мне не нравятся какие-либо решения, которые требуют, чтобы мой код определял, на какой элемент управления мне следует установить фокус, из-за сложностей со скрытыми или нулевыми входами и т. д. Мое решение заключалось в том, чтобы установить атрибут autofocus на моем входе в любом случае , а затем установите фокус в моем коде, когда я показываю div:
form.querySelector('*[autofocus]').focus();
ЗАМЕТКА: если форма размещается вниз на странице таким образом, чтобы пользователь мог прокрутить страницу вниз, чтобы увидеть форму, установка фокуса будет автоматически прокручивать страницу вниз, как при привязке. Это не очень хорошо, потому что пользователь, попавший на такую страницу, сразу же увидит, что она прокручивается до позиции формы. Я тестировал в Safari и FF (IE7 не выполняет прокрутку страниц).