События формы JavaScript - httpdoc.ru

События формы JavaScript

События формы JavaScript - это те события, которые запускаются, когда пользователь взаимодействует с формой на веб-сайте. Цель использования событий формы - сделать процесс заполнения формы интерактивным и информативным для пользователя. Эти формы событий включает в себя onclick , onfocus , onblur , onreset и т.д.

Оптимальная интерактивность сайта положительно влияет на пользователя. Интеллектуальное добавление событий формы обеспечивает удобство работы пользователей. Итак, как создать интерактивную форму? Интерактивные формы включают такие функции, как:

  • Советы по заполнению формы, когда пользователь нажимает / наводит курсор на поле ввода.
  • Подтверждение отправки формы.
  • Проверка адреса электронной почты, контактного номера и т. Д. В режиме реального времени.

Есть много способов использовать события формы, давайте посмотрим на некоторые из наиболее часто используемых:


Событие Javascript Focus (onfocus)

Событие фокуса в JavaScript срабатывает, когда пользователь фокусируется, т. Е. Нажимает на элемент. Используя onfocus обработчик событий, вы можете изменить стиль элемента, например изменить цвет, добавить тень и т. Д. Точно так же вы можете отображать всплывающие подсказки или окна предупреждений, чтобы предоставить информацию о поле ввода.

Пример события формы onfocus

В приведенном ниже примере, когда пользователь фокусируется, т. Е. Нажимает на поле ввода, его цвет меняется с белого на зеленый. Итак, что действительно происходит, так это то, что когда пользователь нажимает на поле ввода, запускается событие onfocus. onfocus Обработчик принимает управление и вызывает определенную пользователем highlightInput() функцию. Эта функция имеет код для изменения цвета поля ввода на зеленый. Функция выполняет и меняет цвет поля ввода.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Handling the Focus Event </title>
</head>
<body>
    <script>
        function highlightInput(elm){
            elm.style.background = "lightgreen";
        }    
    </script>
    <input type="text" onfocus="highlightInput(this)">
    <button type="button">Button</button>
</body>
</html>

Выход

JavaScript Handling the Focus Event

Примечание . Значение этого ключевого слова внутри обработчика событий относится к элементу, на котором есть обработчик. В приведенном выше примере это относится к полю ввода, находящемуся в фокусе.


Событие размытия JavaScript (onblur)

Событие JavaScript Blur противоположно событию Focus, оно срабатывает, когда элемент теряет фокус. Итак, размытие - это ситуация, когда элемент становится не сфокусированным после того, как сфокусирован. onblur Обработчик события используется для обработки этого события.

Пример события формы onblur

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

Вы можете экспериментировать с кодом. Сделайте свои функции и попробуйте разные стили.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript OnBlur Event </title>
</head>
<body>
 <input type="text" onblur="alert('Text input loses focus!')">
 <button type="button">Submit</button>

</body>
</html>

Выход

JavaScript Handling the Blur Event

Примечание. Сначала щелкните внутри поля ввода текста, затем щелкните снаружи, чтобы увидеть, как это работает.


Событие изменения JavaScript (onchange)

Событие JavaScript Change запускается, когда пользователь изменяет записанное или выбранное значение элемента формы. Например: изменение значения поля ввода, изменение выбора раскрывающегося списка или изменение выбора переключателя. onchange Обработчик события используется для обработки этого события.

Пример события формы обмена

В примере onchange события создается список выбора. Когда пользователь изменяет значение по умолчанию для списка выбора, onchange срабатывает обработчик событий и вызывает окно предупреждения, как определено в коде. Окно предупреждения подтверждает выбор.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript OnChange Event </title>
</head>
<body>
   <select onchange="alert('You have changed the selection!');">
    <option>Select</option>
    <option>OnePlus</option>
    <option>Samsung</option>
    </select>
  <p><strong>Note:</strong> Select any option in select box to see how it works.</p>
</body>
</html>

Выход

JavaScript OnChange Event

Примечание. Выберите любой параметр в поле выбора, чтобы увидеть, как он работает.


Событие отправки JavaScript (onsubmit)

Событие отправки JavaScript происходит, когда пользователь нажимает кнопку отправки, чтобы отправить форму. Событие отправки обычно используется для запроса подтверждения у пользователя на отправку формы. onsubmit Обработчик события используется для обработки этого события.

Пример события формы onsubmit

В примере события onsubmit также есть всплывающее окно с предупреждением. onsubmit Обработчик события получает trigerred когда кнопки пользователь нажимает на кнопку. Окно предупреждения предупреждает пользователей о том, что введенная ими информация будет отправлена ​​на онлайн-сервер. Попробуйте сами.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript OnSubmit Event </title>
</head>
<body>
  <form action="../index.php" method="post" onsubmit="alert('Form data will be submitted to 
  the server!');">
     <label>First Name:</label>
     <input type="text" name="first-name" required>
     <input type="submit" value="Submit">
  </form>
</body>
</html>

Выход

JavaScript OnSubmit Event