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.
| Порада: | Подія |
| Порада: | Слідкуйте за тим, щоб у формах, які містять складні інтерактивні елементи (наприклад, динамічно створені поля або кастомні компоненти), скидання налаштовувалося для всіх полів, а не тільки для стандартних елементів форми. |
| Порада: | Форми можуть містити "відображувані" значення (наприклад, кастомні текстові поля або підказки), які не є частиною звичайного введення даних. Використовуйте |
Синтаксис
form.addEventListener('reset', function(event) {
// Ваш код
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад показує, як працює подія reset у формі, де користувач вводить дані і може їх скинути за допомогою кнопки "Скинути". Перед скиданням форми з'являється спливаюче повідомлення для підтвердження дії. Після успішного скидання в журналі з'являється запис із поточним часом, коли форма була скинута.
У цьому прикладі ми запитуємо у користувача, чи хоче він скинути тільки додаткові поля. Якщо він погоджується, тільки додаткове поле очищається, а основні поля форми залишаються без змін. Цей підхід дозволяє більш гнучко управляти скиданням форми.
let form = document.getElementById('myForm');
let additionalField = document.getElementById('additionalField');
form.addEventListener('reset', function(event) {
if (confirm('Скинути тільки додаткові поля?')) {
additionalField.value = ''; // Скидаємо лише додаткове поле
event.preventDefault(); // Запобігаємо повному скиданню форми
}
});Цей приклад демонструє, як можна використовувати подію reset для ведення журналу дій користувача. Після кожного скидання форми у спеціальне текстове поле додається запис із поточним часом. Це корисно для відстеження дій у формах у реальному часі, наприклад, у системах, де важливо знати, коли користувач скинув форму.
let form = document.getElementById('myForm');
let logArea = document.getElementById('log');
form.addEventListener('reset', function() {
logArea.textContent += 'Форма була скинута о ' + new Date().toLocaleTimeString() + '\n';
});