Очистіть усі поля у формі після повернення за допомогою кнопки повернення браузера

Мені потрібен спосіб очистити всі поля у формі, коли користувач використовує кнопку повернення браузера. Зараз браузер запам’ятовує всі останні значення та відображає їх, коли повертаєтеся назад.

Більше роз'яснень, навіщо мені це, я вимкнув поле введення, значення якого автоматично генерується за допомогою алгоритму, щоб зробити його унікальним для певної групи даних. Після того, як я надішлю форму, і дані будуть введені в базу даних, користувач не зможе повторно використовувати те саме значення, щоб подати ту саму форму. Отже, я спочатку вимкнув поле введення. Але якщо користувач використовує кнопку повернення браузера, браузер запам'ятовує останнє значення, і те саме значення зберігається в полі введення. Отже, користувач може знову подати форму з тим самим значенням.

Я не розумію, що саме відбувається, коли ти натискаєш кнопку назад у браузері. Здається, вся сторінка витягується з кешу, не звертаючись до сервера, якщо розмір сторінки знаходиться в межах кешу браузера. Як я можу переконатись, що сторінка завантажується із сервера незалежно від налаштувань браузера при натисканні кнопки назад браузера?

Сучасні браузери реалізують щось, відоме як кеш-зворотне пересилання (BFCache). При натисканні кнопки назад / вперед фактична сторінка не перезавантажується (і сценарії ніколи не запускаються повторно).

Якщо вам потрібно щось зробити у випадку, якщо користувач натискає клавіші вперед / назад - слухайте BFCache pageshowта pagehideподії:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

Докладніше про реалізації Gecko та WebKit .

Інший спосіб без JavaScript - це використовувати, <form autocomplete="off">щоб запобігти повторному заповненню форми останніми значеннями.

Дивіться також це питання

Перевіряв це лише з одним <input type="text"> всередині форми, але чудово працює в поточних Chrome та Firefox, на жаль, не в IE10.

Я натрапив на цю публікацію, шукаючи спосіб очистити всю форму, пов’язану з BFCache (кеш кнопок назад / вперед) у Chrome.

На додаток до того, що надав Sim, мій випадок використання вимагав поєднання деталей із Clear Form on Back Back? .

Я виявив, що найкращий спосіб зробити це - дозволити формі поводитися так, як вона очікує, і викликати подію:

$(window).bind("pageshow", function() {
    var form = $('form'); 
    // let the browser natively reset defaults
    form[0].reset();
});

Якщо ви не обробляєте inputподії, щоб створити об’єкт у JavaScript або щось інше з цього приводу, тоді ви готові. Однак, якщо ви слухаєте події, то принаймні в Chrome вам потрібно запустити changeподію самостійно (або будь-яку іншу подію, яку ви хочете обробити, включаючи спеціальну):

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');

Це повинно бути додано післяreset того, як робити якісь - або блага.

Якщо вам потрібна сумісність із старими браузерами, опція "pagehow" може не спрацювати. Наступний код працював для мене.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

Це те, що мені вдалося.

$(window).bind("pageshow", function() {
    $("#id").val('');
    $("#another_id").val('');
});

Спочатку це було в $(document).readyрозділі мого jquery, який також працював. Однак я чув, що не всі браузери спрацьовують $(document).readyпри натисканні кнопки назад, тому я вийняв її. Я не знаю плюсів і мінусів цього підходу, але я тестував у декількох браузерах та на кількох пристроях, і жодних проблем із цим рішенням не виявлено.

Наведені нижче посилання можуть вам допомогти ..

Кнопка повернення браузера відновлює порожні поля , Очистити форму на кнопці "Назад"?

Сподіваюся, це допомагає ... Найкраща удача