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

Опубликовано: 12 Декабря, 2021

Чтобы установить фокус на элемент HTML-формы, можно использовать метод JavaScript focus (). Для этого вызовите этот метод для объекта элемента, который должен быть сфокусирован, как показано в примере.

Пример 1. Метод focus () устанавливается на тег ввода, когда пользователь нажимает кнопку Focus.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        Set focus to HTML form element
    </ title >
 </ head >
 
< body >
    < p >
        Click on button to set focus
        on input field
    </ p >
     
    < form >
        < input type = "text" id = "input1" >
         
        < br >< br >
         
        < button type = "button" onclick = "focusInput()" >
            Set Focus
        </ button >
    </ form >
     
    < script >
        function focusInput() {
            document.getElementById("input1").focus();
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Перед нажатием кнопки:
После нажатия кнопки:

Пример 2: В этом примере основное внимание уделяется полю ввода автоматически при загрузке страницы.

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        Set focus to HTML form element
    </ title >
 </ head >
 
< body >
 
    < p >
        Click on button to focus
        on the input field.
    </ p >
     
    < form >
        Name: < input type = "text" id = "input1" >
         
        < br >< br >
         
        Age: < input type = "text" id = "input2" >
    </ form >
     
    < script >
        window.onload = function() {
            document.getElementById("input1").focus();
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Пример 3: Следующая программа фокусируется на поле ввода при нажатии кнопки «Фокус». Чтобы размыть сфокусированное поле ввода, можно использовать свойство blur ().

 <!DOCTYPE html>
 < html >
 
< head >
    < title >
        Set focus to HTML form element
    </ title >
 </ head >
 
< body >
    < p >
        Click on button to focus
        on the input field.
    </ p >
     
    < form >
        < input type = "text" id = "input1" >
         
        < br >< br >
         
        < button type = "button" onclick = "focusInput()" >
            Focus
        </ button >
         
        < button type = "button" onclick = "blurInput()" >
            Blur
        </ button >
    </ form >
     
    < script >
        function focusInput() {
            document.getElementById("input1").focus();
        }
        function blurInput() {
            document.getElementById("input1").blur();
        }
    </ script >
 </ body >
 
</ html > 

Выход:

Перед нажатием кнопки:
После нажатия кнопки «Фокус»:
После нажатия кнопки «Размытие»:

JavaScript Вопросы о Web технологиях Picked

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

РЕКОМЕНДУЕМЫЕ СТАТЬИ