html แก้ปัญหาเบราว์เซอร์จดจำช่องป้อนข้อมูลรหัสผ่าน

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

อย่างไรก็ตาม ในบางสถานการณ์ (เช่น ในหน้าการถอนเงินและเติมเงิน) การกรอกรหัสผ่านโดยอัตโนมัตินั้นไม่ปลอดภัยอย่างยิ่ง จำเป็นต้องใช้วิธีการบางอย่างเพื่อป้องกันการป้อนอัตโนมัติของเบราว์เซอร์

ฉันพบข้อผิดพลาดบางอย่างในระหว่างกระบวนการแก้ไขปัญหา ต่อไปนี้เป็นหมายเหตุบางประการ:

ใช้แอตทริบิวต์ HTML autocomplete="off"

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

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

เพิ่ม <input type="password"/>

วิธีการที่แพร่หลายบนอินเทอร์เน็ต วิธีนี้ใช้ได้กับเบราว์เซอร์เกือบทุกเวอร์ชัน แต่ใช้ไม่ได้กับเบราว์เซอร์และ Safari เวอร์ชันสูงกว่าบางเวอร์ชัน หลายวิธีที่แนะนำในภายหลังจะขึ้นอยู่กับการปรับปรุงวิธีนี้

<!-- อินพุตเพิ่มเติม -->
<input type="password" style="display:none"/>
<!-- อินพุตดั้งเดิม -->
<ประเภทอินพุต = "รหัสผ่าน"/>

เพิ่มแบบฟอร์ม

วิธีนี้จะแก้ปัญหาการเติมอัตโนมัติใน Safari เมื่อเปรียบเทียบกับวิธีข้างต้น แต่ใช้ไม่ได้กับ Chrome เวอร์ชันสูงกว่าบางเวอร์ชัน (หลังจากการทดสอบ Chrome 46.0 ใช้งานได้ Chrome 47.0 ล้มเหลว)

<!-- แบบฟอร์มและการป้อนข้อมูลเพิ่มเติม -->
<form style="display:none">
  <ประเภทอินพุต = "รหัสผ่าน"/>
</แบบฟอร์ม>
<!-- อินพุตดั้งเดิม -->
<ประเภทอินพุต = "รหัสผ่าน"/>

ทางออกสุดท้าย

โซลูชันนี้รวมสองวิธีข้างต้นเข้าด้วยกัน และสุดท้ายก็แก้ปัญหาการเติมอัตโนมัติใน Chrome 47.0 ได้

<!--เนื้อหาเพิ่มเติม-->
<form style="display:none">
  <ประเภทอินพุต = "รหัสผ่าน"/>
</แบบฟอร์ม>
<input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
<!-- อินพุตดั้งเดิม -->
<ประเภทอินพุต = "รหัสผ่าน"/>

สิ่งที่ต้องสังเกตในวิธีนี้คืออินพุตที่เป็นรุ่นเดียวกันกับอินพุตเป้าหมายไม่สามารถตั้งค่าให้แสดง: ไม่มีได้ หากตั้งค่าไว้ อินพุตนั้นจะถูกเติมใน Chrome 47.0 โดยอัตโนมัติ ดังนั้นคุณสามารถใช้วิธีอื่นได้เท่านั้น เพื่อซ่อนอินพุตนี้

สรุป

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

บทความนี้จะสรุปเกี่ยวกับวิธีที่ HTML แก้ปัญหาการจดจำกล่องป้อนรหัสผ่านในเบราว์เซอร์ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจดจำกล่องป้อนรหัสผ่านใน HTML โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่างต่อไป downcodes.com มากขึ้นในอนาคต!