<header>
<h2 class="title">Focus Events</h2>
<p class="description">Відстежує, коли елемент отримує або втрачає фокус для інтерфейсної взаємодії.</p>
</header>
<main>
<div class="result">
<form id="sample-form">
<!-- Поля форми для взаємодії -->
<label>
Ім'я:
<input type="text" class="form-field" id="name-input" placeholder="Введіть ваше ім'я">
</label>
<br>
<label>
Email:
<input type="email" class="form-field" id="email-input" placeholder="Введіть вашу електронну пошту">
</label>
<br>
<label>
Телефон:
<input type="tel" class="form-field" id="phone-input" placeholder="Введіть ваш номер телефону">
</label>
<br>
<button type="button" id="reset-button">Скинути</button>
</form>
</div>
</main>
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.form-field {
display: block;
margin: 10px 0;
padding: 8px;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-field:focus {
border-color: #4a90e2;
outline: none;
}
.warning {
border-color: red;
}
document.addEventListener('DOMContentLoaded', () => {
const formFields = document.querySelectorAll('.form-field');
const resetButton = document.getElementById('reset-button');
// Обробка фокусу для виділення активного поля
formFields.forEach(field => {
field.addEventListener('focus', (event) => {
event.target.style.backgroundColor = '#e6f7ff'; // Зміна фону на світло-блакитний
});
// Обробка події blur для перевірки заповнення полів
field.addEventListener('blur', (event) => {
event.target.style.backgroundColor = ''; // Повернення фону
if (!event.target.value.trim()) {
event.target.classList.add('warning'); // Виділення червоним, якщо порожнє
alert(`Поле "${event.target.placeholder}" не може бути порожнім!`);
} else {
event.target.classList.remove('warning'); // Видалення попередження, якщо заповнене
}
});
});
// Скидання полів і стилів при натисканні кнопки "Скинути"
resetButton.addEventListener('click', () => {
formFields.forEach(field => {
field.value = ''; // Очистити значення
field.classList.remove('warning'); // Видалити червону рамку
field.style.backgroundColor = ''; // Відновити фоновий колір
});
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.