0Pricing
HTML Academy · บทเรียน

เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ

จัดการการรีเซ็ตแบบฟอร์มและติดตามสถานะช่องข้อมูลระหว่างการโต้ตอบของผู้ใช้

เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุการณ์การคืนค่า

การเรียกใช้ form.reset() หรือการคลิก <button type="reset"> จะส่งเหตุการณ์ reset ไปยังแบบฟอร์ม แต่ละช่องจะกลับไปเป็นค่าเริ่มต้น (แอตทริบิวต์ value หรือค่าว่างสำหรับช่องรับข้อมูลใหม่) รับฟังเหตุการณ์นี้เพื่อจัดการกับการคืนค่าด้วยโปรแกรม

ค่าเริ่มต้น

สถานะเริ่มต้นที่ใช้ในการคืนค่าคือคุณสมบัติ defaultValue, defaultChecked หรือ defaultSelected ไม่ใช่ค่าปัจจุบัน คุณสมบัติเหล่านี้สะท้อนแอตทริบิวต์ value/checked/selected ใน HTML ซึ่งกำหนดไว้ขณะวิเคราะห์ HTML และจะไม่เปลี่ยนแปลงจากการโต้ตอบของผู้ใช้

การอัปเดตค่าเริ่มต้นด้วยโปรแกรม

หากต้องการทำให้ค่าปัจจุบันกลายเป็น "ค่าเริ่มต้น" ใหม่ (เพื่อให้การคืนค่าครั้งต่อ ๆ ไปกลับมายังค่านั้น) ให้ตั้งค่า input.defaultValue = input.value เหมาะสำหรับใช้หลังบันทึกสำเร็จ เพราะการคืนค่าในอนาคตจะกลับไปยังสถานะที่บันทึกไว้แทนแบบฟอร์มว่างเดิม

form.addEventListener("submit", () => {
  // After save, treat current as defaults
  Array.from(form.elements).forEach((el) => {
    if ("defaultValue" in el) el.defaultValue = el.value;
  });
});

การรับฟังเหตุการณ์คืนค่า

เหตุการณ์คืนค่าจะเกิดขึ้น ก่อน ที่ค่าต่าง ๆ จะกลับคืนมา หากต้องการตรวจสอบสถานะหลังคืนค่า ให้เลื่อนไปทำงานในไมโครทาสก์ถัดไป: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })) นี่เป็นรายละเอียดเกี่ยวกับช่วงเวลาของเหตุการณ์ที่มักทำให้สับสน

การป้องกันการคืนค่า

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

การติดตามสถานะมีการเปลี่ยนแปลง

เปรียบเทียบค่าปัจจุบันกับค่าเริ่มต้นเพื่อดูว่าแบบฟอร์มมีการเปลี่ยนแปลงหรือไม่: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue) ใช้เพื่อเปิดหรือปิดปุ่มบันทึก หรือแสดงคำยืนยันเมื่อมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก

การยืนยันก่อนออกจากหน้า

หากต้องการเตือนผู้ใช้ก่อนออกจากหน้าแบบฟอร์มที่มีการเปลี่ยนแปลง: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }) เบราว์เซอร์จะแสดงกล่องโต้ตอบทั่วไปว่า "ต้องการออกจากเว็บไซต์หรือไม่" ปัจจุบันเบราว์เซอร์รุ่นใหม่ไม่รองรับข้อความกำหนดเองแล้ว

ปุ่มคืนค่ามักให้ประสบการณ์ผู้ใช้ที่ไม่ดี

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

การคงอยู่ของสถานะแบบฟอร์ม

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

form.addEventListener("input", () => {
  localStorage.setItem("form-draft", JSON.stringify(new FormData(form)));
});

คอมโพเนนต์กำหนดเองและการคืนค่า

องค์ประกอบแบบฟอร์มกำหนดเอง (ที่สร้างเป็นคอมโพเนนต์เว็บ) จะเข้าร่วมการคืนค่าแบบฟอร์มผ่าน ElementInternals โดยในเมธอด formResetCallback ให้คืนค่ากลับเป็นค่าเริ่มต้น จำเป็นเมื่อองค์ประกอบกำหนดเองครอบช่องรับข้อมูลภายในที่ต้องคืนค่าอย่างชัดเจน

องค์ประกอบกำหนดเองที่เชื่อมโยงกับแบบฟอร์ม

การประกาศ static formAssociated = true ในคลาสขององค์ประกอบกำหนดเอง และการใช้ this.attachInternals() จะเปิดใช้ formResetCallback, formStateRestoreCallback, formDisabledCallback และ formAssociatedCallback เพื่อเชื่อมองค์ประกอบเข้ากับวงจรการทำงานของแบบฟอร์ม

ตรวจสอบความรู้

เมื่อเรียกใช้ form.reset() แต่ละช่องจะกลับไปเป็นค่าใด

สรุป

เหตุการณ์คืนค่าจะเกิดขึ้นเมื่อ form.reset() ทำงาน ช่องต่าง ๆ จะกลับไปเป็น defaultValue/defaultChecked/defaultSelected อัปเดตค่าเริ่มต้นหลังบันทึกเพื่อให้ค่าเหล่านั้นเป็นสถานะใหม่สำหรับการคืนค่า ติดตามสถานะที่มีการเปลี่ยนแปลงโดยเปรียบเทียบค่าปัจจุบันกับค่าเริ่มต้น บันทึกสถานะลงใน localStorage สำหรับแบบฟอร์มยาว และใช้ beforeunload เพื่อเตือนเมื่อกำลังออกจากหน้า องค์ประกอบกำหนดเองเชื่อมต่อได้ผ่าน formAssociated และ formResetCallback

คำถามที่พบบ่อย

บทเรียน “เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ”

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

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. FormData API
  2. Constraint Validation API
  3. reportValidity และ setCustomValidity
  4. เหตุการณ์รีเซ็ตแบบฟอร์มและการจัดการสถานะ
← กลับไปที่ HTML Academy