From f531c0e0906f8990a18614306639e141d9e8c011 Mon Sep 17 00:00:00 2001
From: Jvst Me <git@jvst.me>
Date: Sun, 24 Mar 2024 23:21:35 +0100
Subject: [PATCH] New chapter: Input Fields Events

---
 src/SUMMARY.md                      |  1 +
 src/web_apis/input_fields_events.md | 44 +++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/web_apis/input_fields_events.md

diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index 36bab87..cfdbad9 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -49,3 +49,4 @@
     - [Поиск элементов внутри других элементов](web_apis/querying_elements_inside_other_elements.md)
     - [События](web_apis/events.md)
     - [Поля ввода](web_apis/input_fields.md)
+    - [События полей ввода](web_apis/input_fields_events.md)
diff --git a/src/web_apis/input_fields_events.md b/src/web_apis/input_fields_events.md
new file mode 100644
index 0000000..5cf0a8c
--- /dev/null
+++ b/src/web_apis/input_fields_events.md
@@ -0,0 +1,44 @@
+# События полей ввода
+
+Помимо событий, характерных всем HTML-элементам, поля ввода имеют два специальных типа событий, которые говорят о том, что пользователь поменял значение в поле. Эти два типа событий отличаются тем, в какой момент они происходят.
+
+- `input` — пользователь совершил любое действие, приводящее к изменения значения. Например, ввёл или удалил один символ в текстовом поле.
+- `change` — пользователь совершил одно или несколько действий, по результатам которых значение считается изменённым. Момент срабатывания этого события зависит от типа поля. Например, для текстового поля событие сработает тогда, когда пользователь поменяет значение, а затем уберёт фокус с поля, например кликнув в другом месте страницы. А для поля типа `date` событие сработает тогда, когда пользователь выберет дату в календаре.
+
+Рассмотрим пример страницы, показывающей счётчик числа символов в поле. Счётчик меняется мгновенно, как только пользователь вводит или удаляет очередной символ в поле.
+
+```html
+<label for="text-input">Введите текст:</label>
+<input type="text" id="text-input">
+<p>Длина текста: <span class="counter"></span></p>
+```
+
+```js
+const input = document.querySelector("input");
+const counter = document.querySelector(".counter");
+
+function updateCounter() {
+    counter.innerText = input.value.length;
+}
+
+input.addEventListener("input", updateCounter);
+```
+
+## Упражнения
+
+1. Реализуй страницу для транслитерации кириллицы в латиницу. Страница должна содержать поле для ввода текста кириллицей, а в процессе ввода на странице должен мгновенно отображаться тот же текст, но латиницей.
+
+    > **Совет:** за помощью в реализации транслитерации можешь обратиться к соответствующему упражнению в главе [Динамический доступ к свойствам объекта](../js/dynamic_property_access.md).
+
+1. Реализуй страницу установки пароля. Страница должна содержать поле для ввода пароля и поле для повтора пароля. Пароль в первом поле должен соответствовать критериям сложности: содержать от 8 до 20 символов, хотя бы одну строчную латинскую букву, хотя бы одну заглавную латинскую букву и хотя бы одну цифру. На странице должно отображаться, какие критерии удовлетворены, а какие нет, при этом индикаторы соответствия должны обновляться мгновенно в процессе ввода пароля. Пример индикаторов:
+
+    ```
+    От 8 до 20 символов: ✅
+    Есть строчная латинская буква: ✅
+    Есть заглавная латинская буква: ✅
+    Есть цифра: ❌
+    ```
+
+    Пароль во втором поле должен совпадать с паролем в первом. В моменты, когда пароли не совпадают, на странице должна показываться надпись красного цвета `Пароли не совпадают`.
+
+    > **Совет:** для паролей есть специальный тип полей ввода, `<input type="password">`.