Как установить фокус на первый элемент ввода в форме HTML независимо от идентификатора?

Question

Есть ли простой способ установить фокус (курсор ввода) веб-страницы на первый элемент ввода (текстовое поле, выпадающий список, ...) при загрузке страницы без необходимости знать идентификатор элемента?

Я хотел бы реализовать его как общий скрипт для всех моих страниц / форм моего веб-приложения.

Answer 1

Хотя это не отвечает на вопрос (требующий общего сценария), хотя для других было бы полезно знать, что HTML5 вводит атрибут 'autofocus':

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

Погружение в HTML5 содержит больше информации.

Answer 2

Вы также можете попробовать метод на основе jQuery:

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});

Answer 3

document.forms[0].elements[0].focus();

Это может быть уточнено с помощью цикла, например. не фокусируются определенные типы полей, отключенные поля и тд. Лучше добавить класс = "автофокус" к полю, которое вы на самом деле делаете хотите сфокусировать, и переберите формы [i] .elements [j], ища это имя класса.

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

Answer 4

Наиболее полное выражение jQuery, которое я нашел работающим, (с помощью более чем здесь )

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});

Answer 5

Если вы используете Prototype JavaScript Framework, тогда вы можете использовать focusFirstElement метод:

Form.focusFirstElement(document.forms[0]);

Answer 6

Здесь есть описание, которое может пригодиться: Установить фокус на первый ввод на веб-странице

Answer 7

Вам также необходимо пропустить любые скрытые вводы.

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();

Answer 8

Перепробовал много ответов выше, и они не работали. Нашел этот по адресу: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Спасибо, Колодвор.

$("input:text:visible:first").focus();

Answer 9

Помещение этого кода в конец тега 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>

Answer 10

Я использую это:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();