ตัวตรวจสอบคีย์โค้ด

ตัวตรวจสอบคีย์โค้ด (Keycode Checker) เป็นเครื่องมือสำหรับนักพัฒนาที่ช่วยให้คุณสามารถตรวจสอบได้อย่างรวดเร็วว่าแป้นพิมพ์ที่คุณกดในเบราว์เซอร์ของคุณ ได้รับการจดจำเป็นข้อมูลเหตุการณ์ใน JavaScript อย่างไร

ในการพัฒนาฟรอนต์เอนด์ การตรวจจับแป้นพิมพ์ที่แม่นยำเป็นสิ่งที่จำเป็นเมื่อใช้งานแป้นพิมพ์ลัดหรือการควบคุมเกมตามการป้อนข้อมูลของผู้ใช้ ด้วยเครื่องมือนี้ คุณสามารถรับคุณสมบัติของแป้นพิมพ์ เช่น event.key, event.code และ event.keyCode ได้อย่างรวดเร็วและคัดลอกได้ด้วยคลิกเดียว นอกจากนี้ยังง่ายต่อการทดสอบพฤติกรรมของเค้าโครงแป้นพิมพ์ที่แตกต่างกัน (เช่น JIS เทียบกับ US) และการใช้ร่วมกับแป้นปรับปรุง เช่น Shift และ Ctrl

คุณยังสามารถตรวจสอบประวัติการป้อนข้อมูลแป้นพิมพ์ของคุณ และทดสอบการระงับการทำงานเริ่มต้นของเบราว์เซอร์ (เช่น การเลื่อนแท็บ หรือการเลื่อนหน้าด้วย Spacebar) ภายในเบราว์เซอร์ของคุณได้อย่างปลอดภัยเมื่อเปิดใช้งาน e.preventDefault()

event.key

แสดงถึงอักขระหรือฟังก์ชันที่ผู้ใช้ป้อนเข้ามาจริงๆ ตัวอย่างเช่น การกด Shift + 1 บนแป้นพิมพ์ US จะได้ ! เป็น event.key นี่คือคุณสมบัติที่แนะนำมากที่สุดสำหรับการประเมินการป้อนข้อมูลเชิงตรรกะ

event.code

ระบุตำแหน่งจริงของแป้นที่กด ไม่ว่าจะเป็นเค้าโครงภาษาของแป้นพิมพ์ใดก็ตาม การกดแป้นในตำแหน่ง "A" จะส่งคืน KeyA เสมอ สิ่งนี้มีประโยชน์มากสำหรับการกระทำที่ขึ้นอยู่กับเค้าโครงทางกายภาพ เช่น การเคลื่อนไหวด้วย WASD ในเกม

event.keyCode / event.which

ส่งคืนรหัสตัวเลขเฉพาะระบบที่กำหนดให้กับแป้นที่กด (เช่น 65 สำหรับ A) แม้ว่าจะมีการใช้งานมาอย่างยาวนานในการพัฒนา JavaScript แต่ปัจจุบันนี้เลิกใช้งานแล้ว ควรใช้สำหรับการตรวจสอบความเข้ากันได้แบบย้อนหลังเท่านั้น

event.location

ตัวเลขที่ระบุบริเวณทางกายภาพของแป้นพิมพ์ที่มีการกดแป้น ซึ่งสามารถแยกแยะระหว่างแป้นมาตรฐาน (0), แป้นปรับปรุงซ้าย (1), แป้นปรับปรุงขวา (2) และแป้นตัวเลข (3)

preventDefault()

เมธอด JavaScript ที่ใช้ในการยกเลิกพฤติกรรมเริ่มต้นของเบราว์เซอร์ที่ถูกกระตุ้นด้วยเหตุการณ์ เช่น การเลื่อนหน้าลงเมื่อกดปุ่ม Spacebar

Q.ฉันสามารถใช้เครื่องมือนี้บนสมาร์ทโฟนหรือแท็บเล็ตได้หรือไม่?

มันสามารถทำงานได้อย่างถูกต้องหากคุณเชื่อมต่อแป้นพิมพ์จริงไว้ อย่างไรก็ตาม สำหรับแป้นพิมพ์บนหน้าจอ เหตุการณ์ keydownอาจทำงานไม่ถูกต้องขึ้นอยู่กับระบบปฏิบัติการหรือเบราว์เซอร์ หรืออาจส่งคืนคีย์โค้ดเดียวกันเสมอ (เช่น 229) เครื่องมือนี้ออกแบบมาเพื่อใช้งานกับแป้นพิมพ์จริง

Q.ฉันควรใช้ event.key หรือ event.code ดี?

ขึ้นอยู่กับกรณีการใช้งานของคุณ หากคุณต้องการประเมินความหมายของแป้นหรือตัวอักษรที่ป้อนเข้า (เช่น 'กด Enter เพื่อส่ง') ให้ใช้ event.key ในทางกลับกัน หากคุณต้องการให้การกระทำอิงตามตำแหน่งจริงบนแป้นพิมพ์ (เช่น 'เคลื่อนที่ตัวละครด้วย W, A, S, D') การใช้ event.code จะเป็นวิธีที่ดีที่สุด

Q.ฉันสามารถป้องกันปุ่มลัดเช่น F5 หรือ Ctrl+W ได้หรือไม่?

แม้ว่าคุณจะใช้ e.preventDefault() ของ JavaScript คุณก็อาจไม่สามารถป้องกันปุ่มลัดที่สงวนไว้ในระดับความปลอดภัยหรือระดับระบบปฏิบัติการ/เบราว์เซอร์ได้อย่างสมบูรณ์ เช่น การปิดแท็บ, การโหลดหน้าต่างซ้ำ หรือการเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์

Q.ทำไม event.keyCode จึงเลิกใช้งาน (Deprecated)?

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

Q.ข้อมูลแป้นพิมพ์ที่ป้อนถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

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

นี่คือสถานการณ์การพัฒนาทั่วไปที่จำเป็นต้องตรวจสอบคีย์โค้ด