JavaScript

ตอบกลับเหตุการณ์ในแบบฟอร์ม

คุณสามารถใช้ JavaScript เพื่อตอบกลับการโต้ตอบของผู้ใช้ในแบบฟอร์ม แสดงช่องเพิ่มเติมของแบบฟอร์ม ส่งแบบฟอร์ม และอื่นๆ อีกมากมาย

ช่วยให้ผู้ใช้กรอกข้อมูลในตัวควบคุมแบบฟอร์มเพิ่มเติม

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

คุณจะใช้ JavaScript เพื่อแสดง <input> ได้ก็ต่อเมื่อเลือก <input type="radio"> ที่เชื่อมโยงไว้เท่านั้น

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

มาดูโค้ด JavaScript ของการสาธิตกัน คุณสังเกตเห็นแอตทริบิวต์ aria-controls และ aria-expanded ไหม ใช้แอตทริบิวต์ ARIA เหล่านี้เพื่อช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอเข้าใจว่าเมื่อใดที่มีการแสดงหรือซ่อนตัวควบคุมแบบฟอร์มเพิ่มเติม

ตรวจสอบว่าผู้ใช้ส่งแบบฟอร์มได้โดยไม่ต้องออกจากหน้า

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

หากต้องการทำเช่นนี้ ให้ฟังเหตุการณ์ onsubmit แล้วใช้ event.preventDefault() เพื่อป้องกันการทำงานเริ่มต้น และส่ง FormData โดยใช้ API การดึงข้อมูล

การสนับสนุนเบราว์เซอร์

  • 42
  • 14
  • 39
  • 10.1

แหล่งที่มา

สคริปต์แบ็กเอนด์จะตรวจสอบได้ว่าคําขอ POST มาจากเบราว์เซอร์ (โดยใช้แอตทริบิวต์ action ขององค์ประกอบแบบฟอร์มที่ method="post") หรือจาก JavaScript เช่น คําขอ fetch()

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

แจ้งผู้ใช้โปรแกรมอ่านหน้าจอทุกครั้งเกี่ยวกับการเปลี่ยนแปลงเนื้อหาแบบไดนามิก เพิ่มองค์ประกอบที่มีแอตทริบิวต์ aria-live="polite" ลงใน HTML และอัปเดตเนื้อหาขององค์ประกอบหลังการเปลี่ยนแปลง เช่น อัปเดตข้อความเป็น "โพสต์ความคิดเห็นของคุณเรียบร้อยแล้ว" หลังจากที่ผู้ใช้ส่งความคิดเห็นแล้ว

ดูข้อมูลเพิ่มเติมเกี่ยวกับภูมิภาคแบบสดของ ARIA

การตรวจสอบความถูกต้องด้วย JavaScript

ตรวจสอบว่าข้อความแสดงข้อผิดพลาดสอดคล้องกับรูปแบบและลักษณะทั่วไปของเว็บไซต์

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

ตรวจสอบว่าผู้ใช้ได้รับการแจ้งเตือนเกี่ยวกับข้อผิดพลาดแบบเรียลไทม์

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

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

ตรวจสอบว่าผู้ใช้เห็นรหัสผ่านที่ป้อน

ข้อความที่ป้อนสำหรับ <input type="password"> จะถูกปิดบังโดยค่าเริ่มต้น เพื่อเคารพความเป็นส่วนตัวของผู้ใช้ ช่วยให้ผู้ใช้ป้อนรหัสผ่านด้วยการแสดง <button> เพื่อสลับระดับการเข้าถึงข้อความที่ป้อน

ลองใช้เดโม สลับการแสดงข้อความที่ป้อนโดยใช้แสดงรหัสผ่าน <button> คุณลักษณะนี้ทำงานอย่างไร เมื่อคลิกแสดงรหัสผ่าน จะเปลี่ยนแอตทริบิวต์ type ของช่องรหัสผ่านจาก type="password" เป็น type="text" และ <button> ข้อความจะเปลี่ยนเป็น "ซ่อนรหัสผ่าน"

คุณควรทำให้ปุ่มแสดงรหัสผ่านเข้าถึงได้ เชื่อมต่อ <button> กับ <input type="password"> โดยใช้แอตทริบิวต์ aria-controls

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

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานตัวเลือกแสดงรหัสผ่าน

แหล่งข้อมูล