ล้างฟิลด์ทั้งหมดในแบบฟอร์มเมื่อย้อนกลับด้วยปุ่มย้อนกลับของเบราว์เซอร์

ฉันต้องการวิธีล้างฟิลด์ทั้งหมดในแบบฟอร์มเมื่อผู้ใช้ใช้ปุ่มย้อนกลับของเบราว์เซอร์ ในตอนนี้เบราว์เซอร์จะจดจำค่าสุดท้ายทั้งหมดและแสดงเมื่อคุณย้อนกลับ

คำชี้แจงเพิ่มเติมเกี่ยวกับสาเหตุที่ฉันต้องการสิ่งนี้ ฉันได้ปิดช่องป้อนข้อมูลซึ่งค่าถูกสร้างขึ้นโดยอัตโนมัติโดยใช้อัลกอริทึมเพื่อทำให้ไม่ซ้ำกันภายในกลุ่มข้อมูลบางกลุ่ม เมื่อฉันส่งแบบฟอร์มและป้อนข้อมูลลงในฐานข้อมูลแล้วผู้ใช้จะไม่สามารถใช้ค่าเดิมเพื่อส่งแบบฟอร์มเดิมได้อีก ดังนั้นฉันจึงปิดการใช้งานช่องป้อนข้อมูลตั้งแต่แรก แต่ถ้าผู้ใช้ใช้ปุ่มย้อนกลับของเบราว์เซอร์เบราว์เซอร์จะจำค่าสุดท้ายและค่าเดิมจะยังคงอยู่ในช่องป้อนข้อมูล ดังนั้นผู้ใช้สามารถส่งแบบฟอร์มที่มีค่าเดียวกันอีกครั้ง

สิ่งที่ฉันไม่เข้าใจคือสิ่งที่เกิดขึ้นเมื่อคุณกดปุ่มย้อนกลับของเบราว์เซอร์ ดูเหมือนว่าทั้งหน้าจะถูกดึงมาจากแคชโดยไม่ต้องติดต่อกับเซิร์ฟเวอร์เลยหากขนาดเพจอยู่ในขีด จำกัด แคชของเบราว์เซอร์ ฉันจะแน่ใจได้อย่างไรว่าเพจถูกโหลดจากเซิร์ฟเวอร์โดยไม่คำนึงถึงการตั้งค่าเบราว์เซอร์เมื่อคุณกดปุ่มย้อนกลับของเบราว์เซอร์

เบราว์เซอร์สมัยใหม่ใช้สิ่งที่เรียกว่า back-forward cache (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

นอกเหนือจากที่ซิมให้มาแล้วกรณีการใช้งานของฉันต้องการให้รายละเอียดที่จำเป็นต้องรวมกับClear Form บนปุ่มย้อนกลับ? .

ฉันพบว่าวิธีที่ดีที่สุดในการดำเนินการนี้คืออนุญาตให้แบบฟอร์มทำงานตามที่คาดหวังและเรียกใช้เหตุการณ์:

$(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ทำความดีใด ๆ

หากคุณต้องการใช้งานร่วมกับเบราว์เซอร์รุ่นเก่าตัวเลือก"pageshow"อาจไม่ทำงาน รหัสต่อไปนี้ใช้ได้ผลสำหรับฉัน

$(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เมื่อกดปุ่มย้อนกลับดังนั้นฉันจึงถอดมันออก ฉันไม่รู้ข้อดีข้อเสียของวิธีนี้ แต่ฉันได้ทดสอบกับเบราว์เซอร์หลายตัวและบนอุปกรณ์หลายเครื่องแล้วและไม่พบปัญหาใด ๆ กับโซลูชันนี้

ลิงค์ด้านล่างอาจช่วยคุณได้ ..

เบราว์เซอร์ปุ่มกลับเรียกคืนเขตที่ว่างเปล่า , ล้างแบบฟอร์มที่ปุ่ม Back?

หวังว่านี่จะช่วย ... ขอให้โชคดี