Chrome เวอร์ชันก่อนหน้าพบว่ามีการเพิ่ม 2 รายการใน KeyboardEvent ซึ่งใช้เป็นพารามิเตอร์ที่ส่งไปยัง Listener เหตุการณ์ของ keydown, keypress และ keyup ทั้งแอตทริบิวต์ code (เพิ่มใน Chrome 48) และแอตทริบิวต์ key (เพิ่มเข้ามาใน Chrome 51) ช่วยให้นักพัฒนาแอปสามารถรับข้อมูลที่ยากโดยใช้แอตทริบิวต์เดิมได้อย่างง่ายดาย
แอตทริบิวต์โค้ด
อย่างแรกคือแอตทริบิวต์ code โดยจะตั้งค่าเป็นสตริงที่แสดงคีย์ที่กดเพื่อสร้าง KeyboardEvent โดยไม่นำรูปแบบแป้นพิมพ์ปัจจุบัน (เช่น QWERTY เทียบกับ Dvorak), ภาษา (เช่น อังกฤษหรือฝรั่งเศส) หรือแป้นกดร่วมใดๆ มาพิจารณา
วิธีนี้มีประโยชน์เมื่อคุณสนใจว่าคุณกดคีย์จริงตัวใด แทนที่จะต้องกดคีย์ตัวไหน ตัวอย่างเช่น หากคุณกำลังเขียนเกม คุณอาจต้องการให้แป้นชุดหนึ่งย้ายโปรแกรมเล่นไปในทิศทางต่างๆ และการแมปนั้นควรไม่เกี่ยวข้องกับรูปแบบแป้นพิมพ์
แอตทริบิวต์ที่สำคัญ
ต่อไปเรามีแอตทริบิวต์ key ใหม่ นอกจากนี้ยังมีการตั้งค่าเป็นสตริง แต่ในขณะที่ code แสดงผลข้อมูลเกี่ยวกับคีย์จริงที่กด key จะมีอักขระที่สร้างโดยคีย์ดังกล่าว โดยพิจารณารูปแบบแป้นพิมพ์ปัจจุบัน ภาษา และแป้นกดร่วม
การดูค่าของแอตทริบิวต์ key จะมีประโยชน์ในกรณีที่คุณต้องการทราบว่าอักขระใดที่จะแสดงบนหน้าจอเหมือนกับเวลาที่ผู้ใช้ได้พิมพ์ลงในการป้อนข้อความ
สิ่งนี้หมายความว่าอย่างไรในทางปฏิบัติ
เพื่อให้ตัวอย่างแบบเป็นรูปธรรม สมมติว่าผู้ใช้กำลังใช้แป้นพิมพ์สหรัฐฯ ที่มีการจัดวางแป้นพิมพ์แบบ QWERTY การกดปุ่ม Q บนแป้นพิมพ์จริงจะทำให้เกิด KeyboardEvent ที่มีการตั้งค่าแอตทริบิวต์ code เป็น "KeyQ" โดยจะไม่คำนึงถึงรูปแบบแป้นพิมพ์และคีย์ตัวปรับแต่งอื่นๆ จะเป็นเช่นนี้ หากต้องการเปรียบเทียบ สำหรับแป้นพิมพ์ภาษาฝรั่งเศส (AZERTY) แป้นนี้จะยังคงมี code เท่ากับ "KeyQ" แม้ว่าตัวอักษรที่พิมพ์บนแป้นจะเป็น "a" ก็ตาม
โดยทั่วไปการกดแป้น Q บนแป้นพิมพ์สหรัฐฯ เดียวกันนั้นจะสร้าง KeyboardEvent ที่มีการตั้งค่า key เป็น "q" (โดยไม่มีแป้นกดร่วม) หรือ "Q" (ด้วย Shift หรือ CapsLock) หรือ "œ" (ใน OS X ด้วย Alt) บนแป้นพิมพ์ AZERTY ภาษาฝรั่งเศส แป้นเดียวกันนี้จะสร้าง "a" (หรือ "A" พร้อม Shift หรือ CapsLock) สำหรับรูปแบบแป้นพิมพ์อื่นๆ ค่า key อาจเป็น "й", "ض", "ㅂ", "た" หรืออักขระอื่นๆ
ดูตัวอย่างเกมก่อนหน้านี้หากคุณต้องการให้เกมใช้คีย์ WASD สำหรับการเคลื่อนที่ คุณสามารถใช้แอตทริบิวต์ code และตรวจหา "KeyW", "KeyA", "KeyS" และ "KeyD" ซึ่งใช้ได้กับแป้นพิมพ์และเลย์เอาต์ทุกรูปแบบ แม้แต่แป้นพิมพ์ AZERTY ที่สลับตำแหน่งแป้น "w" และ "z"
แป้นพิมพ์เสมือน
คุณจะเห็นว่าก่อนหน้านี้เรามุ่งเน้นลักษณะการทำงานโดยใช้แป้นพิมพ์จริง แล้วผู้ใช้ที่พิมพ์บนแป้นพิมพ์เสมือนหรืออุปกรณ์อินพุตอื่นจะเป็นอย่างไร ข้อกำหนดนี้มีคำแนะนำอย่างเป็นทางการสำหรับแอตทริบิวต์ code กล่าวโดยสรุปคือ คาดว่าแป้นพิมพ์เสมือนที่เลียนแบบเลย์เอาต์ของแป้นพิมพ์มาตรฐานจะมีการตั้งค่าแอตทริบิวต์ code ที่เหมาะสม แต่แป้นพิมพ์เสมือนที่ใช้เลย์เอาต์ที่ไม่ใช่แบบดั้งเดิมอาจทำให้ไม่ได้ตั้งค่า code เลย
แอตทริบิวต์ key จะตรงไปตรงมามากกว่า ซึ่งคุณควรตั้งค่าเป็นสตริงตามอักขระที่ผู้ใช้พิมพ์ (เสมือน)
ลองเลย
Gary Kačmarčík ได้รวบรวมการสาธิตที่ยอดเยี่ยมเพื่อให้เห็นแอตทริบิวต์ทั้งหมดที่เชื่อมโยงกับ KeyboardEvents ดังนี้
การสนับสนุนในเบราว์เซอร์ต่างๆ
ตามการเขียนนี้ รองรับแอตทริบิวต์ code เฉพาะ Chrome 48+, Opera 35+ และ Firefox 44 ขึ้นไปเท่านั้น
แอตทริบิวต์ key ใช้ได้ใน Firefox 44+, Chrome 51+ และ Opera 38+ โดยมีการรองรับบางส่วนใน Internet Explorer 9+ และ Edge 13+