สร้างหน้าเพื่อบอกให้เบราว์เซอร์ไม่ต้องแคช / สงวนค่าอินพุต

เบราว์เซอร์ส่วนใหญ่แคชค่าอินพุตฟอร์ม ดังนั้นเมื่อผู้ใช้รีเฟรชเพจอินพุตจะมีค่าเหมือนกัน

นี่คือปัญหาของฉัน เมื่อผู้ใช้คลิกบันทึกเซิร์ฟเวอร์จะตรวจสอบข้อมูล POSTed (เช่นผลิตภัณฑ์ที่ตรวจสอบแล้ว) และหากไม่ถูกต้องจะส่งกลับไปที่เบราว์เซอร์ อย่างไรก็ตามตามที่ระบุไว้ข้างต้นแม้ว่าเซิร์ฟเวอร์จะล้างการเลือกสำหรับค่าบางค่า แต่อาจยังคงถูกเลือกเนื่องจากแคชของเบราว์เซอร์!

ข้อมูลของฉันมองไม่เห็นช่องทำเครื่องหมาย (จนกว่าจะเลือกรายการหลัก) ดังนั้นผู้ใช้อาจไม่รู้ด้วยซ้ำว่ายังคงมีการเลือกค่าก่อนหน้าบางค่าอยู่จนกว่าจะคลิกบันทึกอีกครั้งและได้รับข้อความแสดงข้อผิดพลาดแม้ว่าผู้ใช้จะคิดว่าไม่ใช่ก็ตาม ซึ่งระคายเคือง.

สิ่งนี้สามารถแก้ไขได้ด้วยการทำCtrl+ F5แต่ก็ไม่ใช่วิธีแก้ปัญหา มีวิธีอัตโนมัติ / ทางโปรแกรมในการบอกเบราว์เซอร์ไม่ให้แคชข้อมูลอินพุตของฟอร์มในบางฟอร์ม / เพจหรือไม่?

คุณกำหนดค่าเป็นค่าว่างอย่างชัดเจนหรือไม่? ตัวอย่างเช่น:

<input type="text" name="textfield" value="">

สิ่งนี้ควรหยุดเบราว์เซอร์ที่ใส่ข้อมูลในที่ที่ไม่ควร หรือคุณสามารถเพิ่มautocompleteแอตทริบิวต์ให้กับแท็กฟอร์ม:

<form autocomplete="off" ...></form>

จากการอ้างอิง Stack Overflow

มันใช้ไม่ได้กับ value = "" หากเบราว์เซอร์บันทึกค่าไว้แล้วดังนั้นคุณควรเพิ่ม

สำหรับแท็กอินพุตมีแอตทริบิวต์การเติมข้อความอัตโนมัติที่คุณสามารถตั้งค่าได้:

<input type="text" autocomplete="off" />

คุณสามารถใช้การเติมข้อความอัตโนมัติสำหรับแบบฟอร์มได้เช่นกัน

อีกวิธีหนึ่งคือการรีเซ็ตแบบฟอร์มโดยใช้ JavaScript หลังฟอร์มใน HTML:

<form id="myForm">
  <input type="text" value="" name="myTextInput" />
</form>

<script type="text/javascript">
  document.getElementById("myForm").reset();
</script>

โดยทั่วไปมีสองวิธีในการล้างแคช:

<form autocomplete="off"></form>

หรือ

$('#Textfiledid').attr('autocomplete', 'off');

สิ่งนี้ใช้ได้ผลกับฉันในเบราว์เซอร์รุ่นใหม่:

autocomplete="new-password"