Chrome ในช่วง 2-3 เวอร์ชันที่ผ่านมามีการเพิ่ม 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 ได้จัดทำตัวอย่างที่ยอดเยี่ยมเพื่อแสดงภาพแอตทริบิวต์ทั้งหมดที่เชื่อมโยงกับ KeyboardEvent
การรองรับข้ามเบราว์เซอร์
ขณะนี้การรองรับแอตทริบิวต์ code จำกัดอยู่ที่ Chrome 48 ขึ้นไป, Opera 35 ขึ้นไป และ Firefox 44 ขึ้นไป ส่วนแอตทริบิวต์ key รองรับใน Firefox 44 ขึ้นไป, Chrome 51 ขึ้นไป และ Opera 38 ขึ้นไป โดยรองรับเพียงบางส่วนใน Internet Explorer 9 ขึ้นไปและ Edge 13 ขึ้นไป