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.

правити

Порада

Подія reset дозволяє запобігти небажаному скиданню форми, наприклад, при випадковому натисканні кнопки "Скинути". Використовуйте event.preventDefault() для блокування скидання і надання можливості користувачеві передумати.

автор: Bond правити

Порада

Слідкуйте за тим, щоб у формах, які містять складні інтерактивні елементи (наприклад, динамічно створені поля або кастомні компоненти), скидання налаштовувалося для всіх полів, а не тільки для стандартних елементів форми.

автор: Bond правити

Порада

Форми можуть містити "відображувані" значення (наприклад, кастомні текстові поля або підказки), які не є частиною звичайного введення даних. Використовуйте reset, щоб відновити й ці значення до початкового стану.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

form.addEventListener('reset', function(event) {
  // Ваш код
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<form id="myForm">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>
<div id="log">Демонстраційний елемент</div>

let form = document.getElementById('myForm');
let logArea = document.getElementById('log');

form.addEventListener('reset', function() {
  logArea.textContent += 'Форма була скинута о ' + new Date().toLocaleTimeString() + '\n';
});

<form id="myForm">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>
<input type="text" id="additionalField" value="текст для прикладу" placeholder="Введи щось">

let form = document.getElementById('myForm');
let additionalField = document.getElementById('additionalField');

form.addEventListener('reset', function(event) {
  if (confirm('Скинути тільки додаткові поля?')) {
    additionalField.value = ''; // Скидаємо лише додаткове поле
    event.preventDefault(); // Запобігаємо повному скиданню форми
  }
});