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 การดึงข้อมูล

สคริปต์แบ็กเอนด์ของคุณจะตรวจสอบได้ว่าคำขอ 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>

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

แหล่งข้อมูล

• FormData
• Constraint Validation API
• <input type="password">