Установить фокус элемента HTML-формы в JavaScript

1. Установить фокус ввода с помощью JavaScript
2. Установить фокус в текстовой области с помощью JavaScript
3. Установите фокус в поле выбора или раскрывающемся списке с помощью JavaScript

Сосредоточение внимания на поле для пользовательского ввода - это функция UI / UX, которая позволяет продолжать вводить текст в поле, не нажимая на него. Возможно, нам потребуется динамически применить фокус к полю формы, особенно если форма длинная и имеет много полей ввода. Если в поле формы есть ошибка проверки, пользователю будет сложно определить поле в таком сценарии. Таким образом, установка фокуса на поле в javascript во время проверки и автоматической прокрутки до поля ошибки указывает на ошибку непосредственно пользователю, вместо того, чтобы тратить время на выяснение того, где была ошибка. В JavaScript есть метод .focus(). Давайте посмотрим, как мы можем применить их к следующему.

Установить фокус ввода с помощью JavaScript

Чтобы сфокусироваться на поле ввода, нам сначала нужно выбрать поле. Это можно сделать разными способами. Мы можем использовать любой из следующих методов.

• document.getElementById(): запрашивает элемент на основе его идентификатора. Обычно идентификаторы уникальны, поэтому функция getElementById() однозначно возвращает элемент. Если есть больше элементов с тем же идентификатором, он возвращает первый элемент с указанным идентификатором.
• document.getElementsByClassName(): выбирает элемент на основе его имени класса. Обычно он возвращает массив элементов, соответствующих критериям.
• querySelector(): метод JavaScript выбирает элемент на основе его идентификатора, имени класса или даже тега элемента HTML. Функция возвращает один элемент HTML, который удовлетворяет критериям, переданным ей в качестве параметра. В этой статье мы будем использовать функцию getElementById() для простоты представления. После того, как мы выбрали элемент, мы можем установить фокус на элементе с помощью метода .focus(). Ниже приводится синтаксис для .focus.

document.getElementById("input-id").focus();

Установить фокус на поле ввода

Следующий код устанавливает фокус на поле ввода при загрузке страницы.

<input id="username-input" type="text" name="username">

window.onload = function () {
    document.getElementById("username-input").focus();
}

Установить фокус на поле ввода в HTML-форме

Если входной элемент является частью формы, вместо запроса элемента с помощью getElementById() мы можем использовать ссылку на имя формы. Синтаксис использования следующий:

document.<Form name>.<Field name>.focus();

Например, предположим, что у нас есть форма входа в систему с полем ввода. Мы можем установить фокус поля ввода, применив следующий код. Код установит фокус на поле ввода имени пользователя. Есть несколько вещей, о которых нужно позаботиться при использовании имени формы и имени поля, чтобы следующий код работал.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
</form>

window.onload = function () {
    document.LoginForm.UserName.focus();
}

Замечания

• Устанавливая фокус ввода в форме, мы должны назначить атрибут name для HTML-формы и поля, на которое мы нацелены. Если имя не указано, запрос элемента будет затруднен.
• Этот метод не поддерживает имена тегов с дефисами в этом методе. Следовательно, имя, присвоенное HTML-форме или элементу, должно быть либо в верблюжьем регистре (например, UserName), либо в нижнем регистре (например, имя пользователя).
• Для более длинных форм со многими полями, такими как ввод, текстовые области и т. Д., Хорошо установить атрибут scroll для элемента, чтобы браузер автоматически прокручивал выделенный элемент HTML для просмотра. Это предполагаемое поведение, ожидаемое пользователем. В противном случае он задастся вопросом, почему форма недействительна.

document.getElementById("myButton").focus({preventScroll:false});

Установить фокус в текстовой области с помощью JavaScript

Мы можем использовать функцию .focus(), чтобы установить фокус на текстовую область. Обычно для фокусировки в текстовой области мы используем document.getElementById("my-text-area").focus(). Это похоже на использование функции .focus() в поле ввода. Если мы намерены использовать текстовую область внутри тега HTML-формы, мы можем применить ссылку на имя формы вместе с именем текстовой области, чтобы сосредоточиться на ней. См. Следующий код.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
</form>

window.onload = function () {
    document.LoginForm.description.focus();
}

В этом методе мы должны присвоить имя форме и целевому элементу HTML. Правила наименования элементов такие же, как и для поля ввода.

Установите фокус в поле выбора или раскрывающемся списке с помощью JavaScript

Метод .focus() работает с полями выбора или раскрывающимся списком. Если используется в форме, то document.FormName.SelectBoxName.focus() можно использовать для установки фокуса на раскрывающийся список. Ниже приведен код, описывающий использование.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function () {
    document.LoginForm.occupationSelect.focus();
}