ทดสอบ keycode ใน JavaScript - event.key, event.code และ keyCode

event.key ต่างจาก event.code และ keyCode อย่างไร

ทุกครั้งที่กดปุ่มในเบราว์เซอร์จะเกิด KeyboardEvent ที่มีหลายพร็อพเพอร์ตี event.key คือค่าที่ปุ่มสร้างขึ้น เช่น "a", "A", "Enter" หรือ "ArrowUp" และเป็นไปตามรูปแบบคีย์บอร์ดและสถานะ Shift ของผู้ใช้ event.code บอกปุ่มทางกายภาพ เช่น "KeyA" หรือ "Digit1" จึงเหมือนเดิมทั้งบนคีย์บอร์ด QWERTY, AZERTY หรือ Dvorak ส่วน keyCode และ which เป็นรหัสตัวเลขแบบเก่าที่เลิกใช้แล้ว และไม่สม่ำเสมอระหว่างเบราว์เซอร์และรูปแบบคีย์บอร์ด โค้ดสมัยใหม่ควรใช้ event.key กับข้อความและคีย์ลัด และใช้ event.code เมื่อตำแหน่งสำคัญ เช่น การควบคุม WASD ในเกม

ฟีเจอร์

• แสดง event.key, event.code, keyCode และ event.location ของทุกปุ่ม
• สถานะ Ctrl, Shift, Alt และ Meta รวมถึงการกดค้าง
• คำสั่ง if ของ JavaScript พร้อมคัดลอกสำหรับปุ่มที่กด
• ประวัติปุ่มที่กดล่าสุด
• ป้องกันการเลื่อนหน้าเมื่อกด Space และปุ่มลูกศรขณะทดสอบ

ออกแบบมาให้เป็นส่วนตัว

เหตุการณ์ปุ่มถูกอ่านเฉพาะในหน้านี้บนเบราว์เซอร์ของคุณ ไม่มีการบันทึกหรือส่งปุ่มที่คุณกด

ไม่มีการดักจับคีย์ ฝั่งไคลเอนต์ 100%

วิธีใช้ ทดสอบรหัสปุ่ม

1
คลิกที่ใดก็ได้บนหน้าเพื่อให้หน้ามีโฟกัส แล้วกดปุ่ม บนมือถือให้แตะช่องกรอกเพื่อเปิดคีย์บอร์ดบนจอ
2
อ่านค่าตัวใหญ่ซึ่งคือ event.key ด้านล่างเป็น event.code และ keyCode แบบเก่า
3
ดูการ์ดเพื่อรู้ตำแหน่งปุ่ม (Shift ซ้ายหรือขวา แป้นตัวเลข) และปุ่มปรับแต่งที่กดค้างอยู่ แล้วคัดลอกค่าได้ในคลิกเดียว
4
คัดลอกคำสั่ง if ที่สร้างขึ้นไปใส่ในตัวจัดการ keydown ประวัติแสดงปุ่มล่าสุดเพื่อเปรียบเทียบการกดร่วม

ตัวอย่างการใช้งานจริง

คีย์ลัด

สำหรับการค้นหาด้วย Ctrl+K หรือ Cmd+K ให้กดปุ่มร่วมแล้วใช้ event.key === "k" กับ event.ctrlKey || event.metaKey ซึ่งใช้ได้ทั้ง Windows และ macOS

การควบคุมเกม

ใช้ event.code ("KeyW", "KeyA", "KeyS", "KeyD") เพื่อให้ปุ่มเคลื่อนที่อยู่ตำแหน่งเดิมบน AZERTY และรูปแบบอื่น ซึ่ง event.key จะเป็น "z" หรือ "q"

ส่งเมื่อกด Enter

ตรวจ event.key === "Enter" และ !event.shiftKey ในช่องแชต เพื่อส่งเมื่อกด Enter และขึ้นบรรทัดใหม่ด้วย Shift+Enter

แป้นตัวเลขและปุ่มแต่ละฝั่ง

แยก Enter ของแป้นตัวเลข (location 3) ออกจาก Enter หลัก หรือแยก Shift ซ้ายและขวา (location 1 และ 2) เมื่อแอปต้องการ

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

ควรใช้ event.key หรือ event.code?+

ใช้ event.key กับทุกอย่างที่ผูกกับตัวอักษร เช่น คีย์ลัดที่เป็นตัวอักษร การป้อนข้อความ Escape และ Enter ใช้ event.code เมื่อตำแหน่งทางกายภาพสำคัญ เช่น เกมหรือปุ่มลัดที่ไม่ขึ้นกับรูปแบบคีย์บอร์ด

ทำไม keyCode ถึงเลิกใช้?+

ค่า keyCode ไม่เคยถูกทำเป็นมาตรฐาน ต่างกันไปตามเบราว์เซอร์ รูปแบบคีย์บอร์ด และระหว่าง keydown กับ keypress มาตรฐาน KeyboardEvent จึงแทนที่ด้วย key และ code ซึ่งเบราว์เซอร์สมัยใหม่ทุกตัวรองรับ

ทำไมคีย์บอร์ดมือถือแสดง "Unidentified" หรือ 229?+

คีย์บอร์ดบนจอมักส่งเหตุการณ์ composition แทนรหัสปุ่มจริง โดยเฉพาะเมื่อเปิดแก้คำอัตโนมัติหรือใช้ IME บนมือถือให้ฟังเหตุการณ์ input หรือ beforeinput เพื่อรับข้อความ

ทำไมคีย์ลัดบางตัวไปไม่ถึงหน้าเว็บ?+

เบราว์เซอร์หรือระบบปฏิบัติการจัดการปุ่มร่วมบางชุดก่อน เช่น Ctrl+W, Ctrl+T, Cmd+Q หรือ Alt+Tab หน้าเว็บจึงดักจับหรือบล็อกไม่ได้