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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Если вы используете рамки Prototype, вы можете использовать focusFirstElement:

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Это получает первый из видимых общих входных данных, включая текстовые поля и поля выбора. Это также гарантирует, что они не скрыты, не отключены или не прочитаны. он также позволяет использовать целевой div, который я использую в своем программном обеспечении (т.е. первый ввод внутри этой формы).

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();

Ответ 11

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

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

Ответ 12

Для тех, кто использует JSF2.2 + и не может передать автофокус как атрибут без значения для него, используйте это:

 p:autofocus="true"

И добавьте его в пространство имен p (Также часто используется pt. Что бы вы ни хотели).

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">

Ответ 13

С AngularJS:

angular.element('#Element')[0].focus();

Ответ 14

Это включает текстовые поля и исключает переключатели

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});

Ответ 15

Вы должны иметь возможность использовать clientHeight вместо проверки атрибута отображения, поскольку родительский элемент может скрывать этот элемент:

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

Ответ 16

Без сторонних библиотек используйте что-то вроде

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }

Убедитесь, что вы учитываете все теги элементов формы, исключите скрытые/отключенные, как в других ответах и т.д.

Ответ 17

без jquery, например, с обычным JavaScript:

document.querySelector('form input:not([type=hidden])').focus()

работает на Safari, но не на Chrome 75 (апрель 2019)