JS властивість Event.reset
Загальний опис
reset — це подія в JavaScript, яка спрацьовує, коли користувач скидає форму до її початкового стану за допомогою кнопки "Скинути" (<input type="reset">) або програмно через метод form.reset(). Ця подія дозволяє виконувати певні дії до або після скидання форми, такі як скидання власних полів, оновлення інтерфейсу або підтвердження дій користувача.
Подія reset є важливою, коли вам потрібно зробити більше, ніж просто повернути поля форми до їхніх початкових значень. Наприклад, ви можете використовувати її для очищення додаткових полів, які не є частиною стандартної форми, або для відображення повідомлень про успішне скидання.
Коли подія reset спрацьовує, вона надає доступ до об'єкта події, як і будь-яка інша подія. Ви можете перехопити подію і запобігти її виконанню, якщо потрібно перевірити деякі умови перед фактичним скиданням форми.
Приклад використання:
let form = document.getElementById('myForm');
form.addEventListener('reset', function(event) {
if (!confirm('Ви впевнені, що хочете скинути форму?')) {
event.preventDefault(); // Запобігаємо скиданню форми
}
});
У цьому прикладі перед скиданням форми виводиться повідомлення, яке просить користувача підтвердити дію. Якщо користувач вибирає "Скасувати", скидання не відбувається завдяки методу event.preventDefault().
Подія reset працює на будь-якій формі, яка містить стандартні поля вводу. Важливо, що скидання повертає поля до їх початкових значень, тобто тих, що були вказані в момент завантаження сторінки або після останньої зміни цих значень через JavaScript.
- Порада
-
Подія
автор: Bondresetдозволяє запобігти небажаному скиданню форми, наприклад, при випадковому натисканні кнопки "Скинути". Використовуйтеevent.preventDefault()для блокування скидання і надання можливості користувачеві передумати. - Порада
-
Слідкуйте за тим, щоб у формах, які містять складні інтерактивні елементи (наприклад, динамічно створені поля або кастомні компоненти), скидання налаштовувалося для всіх полів, а не тільки для стандартних елементів форми.
автор: Bond - Порада
-
Форми можуть містити "відображувані" значення (наприклад, кастомні текстові поля або підказки), які не є частиною звичайного введення даних. Використовуйте
автор: Bondreset, щоб відновити й ці значення до початкового стану.
Синтаксис
form.addEventListener('reset', function(event) {
// Ваш код
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 66 | 57 | 11.1 | 53 | 16 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 66 | 66 | 57 | 11.3 |
| Переглядач |  |
 |
|---|---|---|
| 15.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє, як можна використовувати подію reset для ведення журналу дій користувача. Після кожного скидання форми у спеціальне текстове поле додається запис із поточним часом. Це корисно для відстеження дій у формах у реальному часі, наприклад, у системах, де важливо знати, коли користувач скинув форму.
HTML
<form id="myForm">
<label>Ім'я: <input type="text" name="name" value="Лесь"></label>
<button type="submit">Надіслати</button>
</form>
<div id="log">Демонстраційний елемент</div>JS
let form = document.getElementById('myForm');
let logArea = document.getElementById('log');
form.addEventListener('reset', function() {
logArea.textContent += 'Форма була скинута о ' + new Date().toLocaleTimeString() + '\n';
});Цей приклад показує, як працює подія reset у формі, де користувач вводить дані і може їх скинути за допомогою кнопки "Скинути". Перед скиданням форми з'являється спливаюче повідомлення для підтвердження дії. Після успішного скидання в журналі з'являється запис із поточним часом, коли форма була скинута.
HTML
<header>
<h2 class="title">HTML Events: reset</h2>
<p class="description">Подія, що відстежує скидання форми, з можливістю його підтвердження.</p>
</header>
<main>
<div class="result">
<!-- Форма для демонстрації -->
<form id="myForm">
<label for="name">Ім'я:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Відправити</button>
<button type="reset">Скинути</button>
</form>
<!-- Журнал дій -->
<div id="log" class="log">
<h3>Журнал подій:</h3>
<ul id="logList"></ul>
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
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;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin-bottom: 20px;
}
label {
margin-top: 10px;
}
input {
padding: 8px;
margin-top: 5px;
}
button {
margin-top: 15px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
.log {
margin-top: 20px;
}
.log h3 {
font-size: 18px;
}
.log ul {
list-style-type: none;
padding: 0;
}
.log ul li {
background-color: #f1f1f1;
padding: 5px 10px;
margin: 5px 0;
border-left: 4px solid #76c7c0;
}JS
let form = document.getElementById('myForm');
let logList = document.getElementById('logList');
// Слухач для події скидання
form.addEventListener('reset', function (event) {
// Підтвердження скидання форми
if (!confirm('Ви впевнені, що хочете скинути форму?')) {
event.preventDefault(); // Скасовуємо скидання, якщо користувач натискає "Скасувати"
} else {
// Додаємо запис в журнал після скидання
let listItem = document.createElement('li');
listItem.textContent = `Форма скинута о ${new Date().toLocaleTimeString()}`;
logList.appendChild(listItem);
}
});
//# sourceURL=pen.jsУ цьому прикладі ми запитуємо у користувача, чи хоче він скинути тільки додаткові поля. Якщо він погоджується, тільки додаткове поле очищається, а основні поля форми залишаються без змін. Цей підхід дозволяє більш гнучко управляти скиданням форми.
HTML
<form id="myForm">
<label>Ім'я: <input type="text" name="name" value="Лесь"></label>
<button type="submit">Надіслати</button>
</form>
<input type="text" id="additionalField" value="текст для прикладу" placeholder="Введи щось">JS
let form = document.getElementById('myForm');
let additionalField = document.getElementById('additionalField');
form.addEventListener('reset', function(event) {
if (confirm('Скинути тільки додаткові поля?')) {
additionalField.value = ''; // Скидаємо лише додаткове поле
event.preventDefault(); // Запобігаємо повному скиданню форми
}
});Коментарі
Коментарів ще немає — будьте першим!