HTML เชิงโต้ตอบสมัยใหม่: dialog, details, popover, contenteditable

แทนที่ไลบรารี UI ของคุณด้วยองค์ประกอบพื้นฐานเนทีฟของ HTML สมัยใหม่: modal dialog, accordion แบบเอกสิทธิ์, popover และพื้นที่แก้ไขได้

10 นาที · 3 คำถาม

<dialog> แก้ปัญหาที่ไลบรารี modal ต้องแฮ็กกันมาหลายปีได้อย่างเนทีฟ showModal() ฉายองค์ประกอบเข้าไปใน top layer - เหนือ z-index ใด ๆ - ทำให้ส่วนที่เหลือของเอกสาร เฉื่อย (inert) (ไม่มีโฟกัส ไม่มีการคลิก) และเปิดเผย pseudo-element ::backdrop ในทางกลับกัน show() จะแสดง dialog แบบไม่ใช่ modal โดยไม่มีความเฉื่อยและไม่มี backdrop แอตทริบิวต์ closedby=any ที่เพิ่งเพิ่มเข้ามาช่วยเพิ่มการปิดด้วยการคลิกด้านนอก

<dialog id="confirm-dlg">
  <form method="dialog">
    <p>Delete this item?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Confirm</button>
  </form>
</dialog>

<form method=dialog> ปิด dialog โดยไม่มีการส่งผ่านเครือข่าย: value ของปุ่มที่กระตุ้นจะกลายเป็น dialog.returnValue ซึ่งเหตุการณ์ close ให้คุณอ่านได้ ปุ่ม Escape ปิด modal dialog โดยปล่อยเหตุการณ์ cancel ออกมาก่อน ซึ่งคุณสามารถยกเลิกได้ด้วย preventDefault() หากกำลังป้อนข้อมูลอยู่

const dlg = document.getElementById("confirm-dlg");
dlg.showModal();
dlg.addEventListener("close", () => {
  console.log(dlg.returnValue); // "ok" or "cancel"
});

Popover API ครอบคลุมเมนู ทูลทิปแบบละเอียด และ toast โดยไม่ต้องใช้ JavaScript: ใส่ popover บนองค์ประกอบและ popovertarget บนปุ่ม แล้วเบราว์เซอร์จะจัดการ top layer, light dismiss (คลิกด้านนอก, Escape) และการปิดร่วมกันของ popover แบบ auto ต่างจาก showModal() ตรงที่ popover ไม่ทำให้หน้าเว็บเฉื่อย เหตุการณ์ beforetoggle และ toggle ให้คุณยกเลิกหรือสังเกตทุกการเปลี่ยนสถานะ

<button popovertarget="user-menu">Menu</button>
<div id="user-menu" popover>
  <button>Profile</button>
  <button>Log out</button>
</div>

<details> มอบเนื้อหาแบบพับได้ที่เข้าถึงได้โดยไม่ต้องใช้สคริปต์ และแอตทริบิวต์ name ที่ใช้ร่วมกันสร้างกลุ่ม เอกสิทธิ์ (exclusive): การเปิดอันหนึ่งจะปิดอันอื่น ๆ เหตุการณ์ toggle จะทำงานที่นั่นในทุกการเปลี่ยนสถานะ ในด้านการแก้ไข contenteditable เปลี่ยนองค์ประกอบใด ๆ ให้เป็นพื้นที่ป้อนข้อมูลแบบ rich; ตัวแปร plaintext-only ของมันห้ามมาร์กอัปใด ๆ และเหตุการณ์ beforeinput แทนที่ API document.execCommand ที่เลิกใช้แล้วได้อย่างดีเยี่ยม

<details name="faq" open>
  <summary>Delivery time?</summary>
  <p>Within 48 hours.</p>
</details>
<details name="faq">
  <summary>Return policy?</summary>
  <p>Within 30 days.</p>
</details>

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. showModal() ให้อะไรเพิ่มเติมเหนือ show()?
   • มันบล็อกการทำงานของ JavaScript จนกว่า dialog จะปิด
   • มันวาง dialog ไว้ใน top layer ทำให้ส่วนที่เหลือของเอกสารเฉื่อย และเปิดใช้งาน ::backdrop
   • มันเพียงแค่ป้องกันไม่ให้หน้าเว็บเลื่อน
2. แอตทริบิวต์ name ที่เหมือนกันบน <details> หลายตัวสร้างอะไรขึ้น?
   • พวกมันถูกส่งพร้อมกันในฟอร์ม parent
   • ไม่มีอะไร: name ไม่ใช่แอตทริบิวต์ที่ใช้ได้บน details
   • accordion แบบเอกสิทธิ์: การเปิดอันหนึ่งจะปิดอันอื่น ๆ โดยอัตโนมัติ
3. อะไรคือความแตกต่างเชิงพฤติกรรมระหว่าง popover แบบ auto และ popover แบบ manual?
   • auto ได้ light dismiss (คลิกด้านนอก, Escape) และปิด popover แบบ auto อื่น ๆ; manual คงเปิดอยู่จนกว่าจะถูกปิดอย่างชัดเจน
   • manual ไม่สามารถวางไว้ใน top layer ได้
   • auto เปิดตัวเองเมื่อหน้าเว็บโหลด