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

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

82 голосов
/ 10 ноября 2008

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

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

Ответы [ 17 ]

2 голосов
/ 23 октября 2012

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

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();
1 голос
/ 20 октября 2014

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

 p:autofocus="true"

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

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
0 голосов
/ 19 апреля 2019

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

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

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

0 голосов
/ 18 февраля 2019

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

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

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

0 голосов
/ 06 декабря 2017

Вы должны иметь возможность использовать 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;
                }
            }
        }
    }   
}
0 голосов
/ 02 июня 2014

Включает текстовые области и исключает переключатели 

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});
0 голосов
/ 08 мая 2014

С AngularJS: 

angular.element('#Element')[0].focus();
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...