Tarayıcı geri düğmesiyle geri döndüğünüzde bir formdaki tüm alanları temizleyin

Kullanıcı tarayıcı geri düğmesini kullandığında bir formdaki tüm alanları temizlemenin bir yolunu bulmalıyım. Şu anda, tarayıcı tüm son değerleri hatırlıyor ve geri döndüğünüzde bunları gösteriyor.

Neden buna ihtiyacım olduğuna dair daha fazla açıklama , değeri belirli bir veri grubu içinde benzersiz kılmak için bir algoritma kullanılarak otomatik olarak oluşturulan devre dışı bırakılmış bir giriş alanına sahibim. Formu gönderdikten ve veri veritabanına girildikten sonra, kullanıcı aynı formu tekrar göndermek için aynı değeri kullanamaz. Bu nedenle ilk etapta giriş alanını devre dışı bıraktım. Ancak kullanıcı tarayıcı geri düğmesini kullanırsa, tarayıcı son değeri hatırlar ve aynı değer giriş alanında tutulur. Böylece kullanıcı aynı değerde formu tekrar gönderebilir.

Anlamadığım şey, tarayıcı geri düğmesine bastığınızda tam olarak ne olduğu. Sayfa boyutu tarayıcı önbellek sınırı içindeyse, tüm sayfa sunucuya hiç başvurmadan önbellekten alınmış gibi görünüyor. Tarayıcı geri düğmesine bastığınızda, tarayıcı ayarlarından bağımsız olarak sayfanın sunucudan yüklendiğinden nasıl emin olabilirim?

Modern tarayıcılar, geri-ileri önbellek (BFCache) olarak bilinen bir şeyi uygular. Geri / ileri düğmesine bastığınızda, gerçek sayfa yeniden yüklenmez (ve komut dosyaları asla yeniden çalıştırılmaz).

Kullanıcının geri / ileri tuşlarına basması durumunda bir şey yapmanız gerekiyorsa - BFCache pageshowve pagehideolayları dinleyin :

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

Gecko ve WebKit uygulamaları için daha fazla ayrıntıya bakın .

JavaScript olmadan başka bir yol <form autocomplete="off">, tarayıcının formu son değerlerle yeniden doldurmasını önlemek için kullanmaktır .

Ayrıca bu soruya bakın

Bunu yalnızca <input type="text"formun içinde tek > ile test ettim, ancak mevcut Chrome ve Firefox'ta iyi çalışıyor, ne yazık ki IE10'da değil.

Chrome'da BFCache (geri / ileri düğme önbelleği) ile ilgili tüm formu temizlemenin bir yolunu ararken bu gönderiye rastladım.

Hangi Sim'in sağladığına ek olarak, kullanım durumum, ayrıntıların Geri Düğmesindeki Formu Temizle ile birleştirilmesini gerektirdi mi? .

Bunu yapmanın en iyi yolunun, formun beklediği gibi davranmasına ve bir olayı tetiklemesine izin vermek olduğunu buldum:

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

inputJavaScript'te bir nesne oluşturmak için olayları veya bu konuda başka bir şeyi işlemiyorsanız, işiniz bitti demektir. Bununla birlikte, olayları dinliyorsanız, en azından Chrome'da bir changeolayı kendiniz tetiklemeniz gerekir (veya özel bir olay da dahil olmak üzere ilgilenmek istediğiniz herhangi bir olay):

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

Herhangi bir iyilik yapmak için bu , sonra eklenmelidir reset.

Daha eski tarayıcılarla uyumlu olmanız gerekiyorsa "pagehow" seçeneği çalışmayabilir. Aşağıdaki kod benim için çalıştı.

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

Bu benim için çalıştı.

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

Bunu başlangıçta $(document).readyjquery'imin de işe yarayan bölümünde yaptım. Ancak, tüm tarayıcıların $(document).readygeri düğmesine basıldığında ateşlenmediğini duydum , bu yüzden çıkardım. Bu yaklaşımın artılarını ve eksilerini bilmiyorum, ancak birden çok tarayıcıda ve birden çok cihazda test ettim ve bu çözümle ilgili herhangi bir sorun bulunmadı.

Aşağıdaki bağlantılar size yardımcı olabilir ..

Tarayıcı geri düğmesi boş alanları geri yükler , Temizle Formu Geri Düğmesi?

Umarım bu yardımcı olur ...