Обработка событий фокуса: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом разделе вы познакомитесь с событиями фокуса в JavaScript и научитесь использовать их для создания интерактивных веб-страниц. Фокус – это состояние элемента, когда он готов к взаимодействию с пользователем, например, к вводу текста или нажатию клавиш. События фокуса позволяют отслеживать, когда элемент получает или теряет фокус, и выполнять определенные действия в ответ на эти события. Вы выполните ряд практических заданий, которые помогут вам закрепить знания и научиться применять события фокуса в различных ситуациях.

Список тем

Изменение стиля при фокусе

Сделайте так, чтобы при получении фокуса текстовым полем (событие `focus`), его фоновый цвет менялся на желтый, а при потере фокуса (событие `blur`) - возвращался к исходному (белому).

HTML

Восстановить HTML

                      <input type="text" id="myInput">

<input type="text" id="myInput">

JavaScript

const input = document.getElementById("myInput");

input.addEventListener("input__1", () => {
  input.style.input__2 = "yellow";
});

input.addEventListener("input__3", () => {
  input.style.backgroundColor = input__4;
});

                     const input = document.getElementById("myInput");

input.addEventListener("input__1", () => {
  input.style.input__2 = "yellow";
});

input.addEventListener("input__3", () => {
  input.style.backgroundColor = input__4;
});

Используйте события `focus` и `blur` для элемента input. В обработчике события `focus` установите свойство `style.backgroundColor` элемента в `'yellow'`, а в обработчике `blur` - в `'white'`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Добавление и удаление класса

При получении фокуса элементом `<input type="text">`, добавьте ему класс "focused". При потере фокуса - удалите этот класс.

CSS

.focused {
  border: 2px solid blue;
}

HTML

Восстановить HTML

                      <input type="text" id="myInput2">

<input type="text" id="myInput2">

JavaScript

const input2 = document.getElementById("input__1");

input2.addEventListener("focus", () => {
  input2.classList.input__2("focused");
});

input2.addEventListener("blur", () => {
  input2.input__3.remove("input__4");
});

                     const input2 = document.getElementById("input__1");

input2.addEventListener("focus", () => {
  input2.classList.input__2("focused");
});

input2.addEventListener("blur", () => {
  input2.input__3.remove("input__4");
});

Используйте `addEventListener` для добавления обработчиков событий `focus` и `blur`. Внутри обработчиков используйте свойство `classList` и его методы `add` и `remove` для управления классами.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Изменение текста при фокусе

При фокусе на текстовом поле, измените текст внутри `<p id="message">` на "Введите ваше имя". При потере фокуса - верните текст на "Поле неактивно".

HTML

Восстановить HTML

                      <input type="text" id="nameInput">
<p id="message">Поле неактивно</p>

<input type="text" id="nameInput">
<p id="message">Поле неактивно</p>

JavaScript

const nameInput = document.getElementById("nameInput");
const message = document.input__1("message");

nameInput.addEventListener("focus", () => {
  message.input__2 = "Введите ваше имя";
});

nameInput.addEventListener("input__3", () => {
  message.textContent = input__4;
});

                     const nameInput = document.getElementById("nameInput");
const message = document.input__1("message");

nameInput.addEventListener("focus", () => {
  message.input__2 = "Введите ваше имя";
});

nameInput.addEventListener("input__3", () => {
  message.textContent = input__4;
});

Используйте `addEventListener` для обработки событий `focus` и `blur` у текстового поля. Для изменения текста внутри `<p>` используйте свойство `textContent`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Отображение/скрытие элемента

Сделайте так, чтобы при фокусе на поле ввода `<input type="password">` появлялся элемент `<div id="tooltip">` с подсказкой (установите `style.display = 'block'`), а при потере фокуса - скрывался (установите `style.display = 'none'`).

CSS

#tooltip {
  display: none;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
}

HTML

Восстановить HTML

                      <input type="password" id="passwordInput">
<div id="tooltip">Сложный пароль!</div>

<input type="password" id="passwordInput">
<div id="tooltip">Сложный пароль!</div>

JavaScript

const passwordInput = document.getElementById("passwordInput");
const tooltip = document.getElementById("tooltip");

passwordInput.addEventListener(input__1, () => {
  tooltip.style.display = input__2;
});

passwordInput.addEventListener("blur", () => {
  tooltip.input__3.display = "none";
});

                     const passwordInput = document.getElementById("passwordInput");
const tooltip = document.getElementById("tooltip");

passwordInput.addEventListener(input__1, () => {
  tooltip.style.display = input__2;
});

passwordInput.addEventListener("blur", () => {
  tooltip.input__3.display = "none";
});

Используйте `addEventListener` для обработки событий `focus` и `blur`. Внутри обработчиков изменяйте свойство `style.display` элемента `<div id="tooltip">`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Фокус на нескольких элементах

Добавьте обработчики событий `focus` и `blur` для двух текстовых полей (`<input type="text">`). При получении фокуса любым из них, добавляйте класс "active" этому полю. При потере фокуса - удаляйте класс "active".

CSS

.active {
  border: 3px solid green;
}

HTML

Восстановить HTML

                      <input type="text" id="input1">
<input type="text" id="input2">

<input type="text" id="input1">
<input type="text" id="input2">

JavaScript

const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");

function handleFocus() {
  this.classList.add("active");
}

function input__1() {
  this.classList.remove(input__2);
}

input1.addEventListener("focus", handleFocus);
input1.addEventListener("blur", handleBlur);
input2.addEventListener("focus", input__3);
input2.addEventListener("blur", handleBlur);

                     const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");

function handleFocus() {
  this.classList.add("active");
}

function input__1() {
  this.classList.remove(input__2);
}

input1.addEventListener("focus", handleFocus);
input1.addEventListener("blur", handleBlur);
input2.addEventListener("focus", input__3);
input2.addEventListener("blur", handleBlur);

Используйте `addEventListener` для обоих полей. Внутри обработчиков используйте `this` для ссылки на текущий элемент (поле, на котором произошло событие) и его свойство `classList`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Переключение фокуса

Создайте два поля ввода. При потере фокуса с первого поля (blur), автоматически переводите фокус на второе поле.

HTML

Восстановить HTML

                      <input type="text" id="field1">
<input type="text" id="field2">

<input type="text" id="field1">
<input type="text" id="field2">

JavaScript

const field1 = document.getElementById('field1');
const field2 = document.getElementById('field2');

field1.addEventListener(input__1, () => {
  field2.input__2();
});

                     const field1 = document.getElementById('field1');
const field2 = document.getElementById('field2');

field1.addEventListener(input__1, () => {
  field2.input__2();
});

Используйте событие `blur` для первого поля и метод `focus()` для второго поля.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Валидация при потере фокуса

При потере фокуса с поля ввода email (blur), проверьте, содержит ли введенное значение символ '@'. Если нет, добавьте полю класс 'invalid', иначе удалите.

HTML

Восстановить HTML

                      <input type="email" id="emailField">

<input type="email" id="emailField">

JavaScript

const emailField = document.getElementById('emailField');

emailField.addEventListener('blur', () => {
  if (input__1.value.includes('@')) {
    emailField.classList.remove('invalid');
  } else {
    input__2.classList.input__3('invalid');
  }
});

                     const emailField = document.getElementById('emailField');

emailField.addEventListener('blur', () => {
  if (input__1.value.includes('@')) {
    emailField.classList.remove('invalid');
  } else {
    input__2.classList.input__3('invalid');
  }
});

Используйте событие `blur` и метод `includes()` для проверки наличия символа '@' в строке. Используйте `classList.add()` и `classList.remove()` для управления классом.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Динамическое изменение placeholder

При фокусе на поле ввода измените его `placeholder` на "Введите значение", а при потере фокуса верните исходный `placeholder` "Поиск...".

HTML

Восстановить HTML

                      <input type="text" id="searchInput" placeholder="Поиск...">

<input type="text" id="searchInput" placeholder="Поиск...">

JavaScript

const searchInput = document.getElementById('searchInput');

searchInput.addEventListener(input__1, () => {
  searchInput.placeholder = input__2;
});

searchInput.addEventListener('blur', () => {
  searchInput.input__3 = 'Поиск...';
});

                     const searchInput = document.getElementById('searchInput');

searchInput.addEventListener(input__1, () => {
  searchInput.placeholder = input__2;
});

searchInput.addEventListener('blur', () => {
  searchInput.input__3 = 'Поиск...';
});

Используйте события `focus` и `blur`, а также свойство `placeholder` элемента input.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Запрет ввода при потере фокуса

Сделайте так, чтобы при потере фокуса с текстового поля, оно становилось недоступным для редактирования (disabled).

HTML

Восстановить HTML

                      <input type="text" id="editableInput">

<input type="text" id="editableInput">

JavaScript

const editableInput = document.getElementById('editableInput');

editableInput.addEventListener(input__1, () => {
  editableInput.input__2 = true;
});

                     const editableInput = document.getElementById('editableInput');

editableInput.addEventListener(input__1, () => {
  editableInput.input__2 = true;
});

Используйте событие `blur` и свойство `disabled` элемента input. Установите `disabled` в `true`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Смена изображения при фокусе

При фокусе на поле ввода, замените изображение на другое. При потере фокуса - верните исходное изображение.

HTML

Восстановить HTML

                      <input type="text" id="imageInput">
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image">

<input type="text" id="imageInput">
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" alt="Image">

JavaScript

const imageInput = document.getElementById('imageInput');
const myImage = document.getElementById('myImage');

imageInput.addEventListener('focus', () => {
  myImage.src = input__1;
});

imageInput.addEventListener(input__2, () => {
  myImage.input__3 = 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png';
});

                     const imageInput = document.getElementById('imageInput');
const myImage = document.getElementById('myImage');

imageInput.addEventListener('focus', () => {
  myImage.src = input__1;
});

imageInput.addEventListener(input__2, () => {
  myImage.input__3 = 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png';
});

Используйте события `focus` и `blur` для поля ввода. Внутри обработчиков изменяйте атрибут `src` элемента `<img>`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку