ข้อผิดพลาดด้วย Firefox - ปิดการใช้งานแอตทริบิวต์ของการป้อนข้อมูลไม่รีเซ็ตเมื่อรีเฟรช

Question 1

ฉันพบสิ่งที่ฉันเชื่อว่าเป็นจุดบกพร่องของ Firefox และฉันสงสัยว่านี่เป็นข้อบกพร่องจริงหรือไม่รวมถึงวิธีแก้ไขปัญหาสำหรับสิ่งนี้

หากคุณสร้างเว็บเพจพื้นฐานด้วยแหล่งข้อมูลต่อไปนี้:

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div>
      <input id="txtTest" type="text" />
      <input type="button" onclick="$('#txtTest').attr('disabled','disabled');" value="Set Disabled (jQuery)" />
      <input type="button" onclick="document.getElementById('txtTest').disabled = true;" value="Set Disabled (js)" />
      <input type="button" onclick="$('#txtTest').removeAttr('disabled');" value="Remove Disabled" />
    </div>
  </body>
</html>

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

ข้อมูลที่น่าสนใจอีกอย่างก็คือมันยังคงทำสิ่งเดียวกันหากอินพุตเป็น a checkboxแทนที่จะเป็นtextboxไฟล์.

Question 2

นี่คือ"คุณลักษณะ"ของ Firefox ซึ่งจะจดจำรูปแบบการป้อนค่าในการรีเฟรชหน้า ในการแก้ไขพฤติกรรมนี้คุณเพียงแค่ตั้งค่าautocomplete="off"ในแบบฟอร์มที่มีอินพุตหรือเพียงแค่ป้อนข้อมูลโดยตรง

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

หรือคุณสามารถ "ฮาร์ดรีเฟรช" ได้โดยคลิก CTRL + F5 การดำเนินการนี้จะรีเซ็ตหน้าปัจจุบันโดยสมบูรณ์

Question 3

ในการจัดการกับปุ่มย้อนกลับให้ทำสิ่งนี้ (จากที่นี่ )

    window.addEventListener('pageshow', PageShowHandler, false);
    window.addEventListener('unload', UnloadHandler, false);

    function PageShowHandler() {
        window.addEventListener('unload', UnloadHandler, false);
    }

    function UnloadHandler() {
        //enable button here
        window.removeEventListener('unload', UnloadHandler, false);
    }

Question 4

ดังที่ได้กล่าวไว้ก่อนที่คุณจะต้องเพิ่มautocomplete="off"ปุ่มของคุณ

นี่คือตัวอย่างsh+ perlเพื่อทำให้สิ่งนี้เป็นอัตโนมัติในกรณีของ<button> s ในไฟล์ / เทมเพลต HTML ของคุณ (ภายใต้สมมติฐานบางประการ):

find /path/to/html/templates -type f -name '*.html' -exec perl -pi -e \
  's/(?<=<button )(.*?)(?=>)/@{[(index($1,"autocomplete=")!=-1?"$1":"$1 autocomplete=\"off\"")]}/g' \
  {} +

สมมติฐานคือ:

การเปิด<button>แท็กเริ่มต้นและสิ้นสุดในบรรทัดเดียวกัน หากไม่ใช่กรณีนี้ (เช่นอาจแบ่งเป็นหลายบรรทัด) การแทนที่/gด้วย/gsควรช่วยได้ ( sตัวปรับแต่งทำให้.ตรงกับบรรทัดใหม่ด้วย)
HTML ที่ถูกต้อง (เช่นไม่มีอักขระตลกระหว่าง<และ>) และไม่มีค่า Escape ที่มากกว่า ( >) ภายในแท็กเปิด

Question 5

นี่เป็นข้อผิดพลาดที่เปิดอยู่ใน Firefox นอกจากนี้ยังมีหมายเหตุในMDN:autocomplete (เลื่อนลงไปที่ช่องสีเหลืองที่สอง):

หมายเหตุ: autocompleteแอตทริบิวต์ยังควบคุมว่า Firefox จะ - ไม่เหมือนกับเบราว์เซอร์อื่น ๆ - ยังคงมีสถานะปิดใช้งานแบบไดนามิกและ (ถ้ามี) การตรวจสอบแบบไดนามิกของ<input>องค์ประกอบ<textarea>องค์ประกอบหรือทั้ง<form>หน้าในการโหลดหน้า คุณลักษณะการคงอยู่จะเปิดใช้งานโดยค่าเริ่มต้น การตั้งค่าของautocompleteแอตทริบิวต์เพื่อoffปิดใช้งานคุณลักษณะนี้ สิ่งนี้ใช้ได้แม้ในขณะที่โดยปกติแล้วแอตทริบิวต์การเติมข้อความอัตโนมัติจะไม่ใช้ตามประเภท ดูข้อผิดพลาด 654072

หากคุณใช้ Bootstrap คุณอาจสนใจไฟล์