Một vài phiên bản Chrome trước đây có hai tính năng bổ sung cho KeyboardEvent, được dùng làm tham số truyền tới trình nghe sự kiện keydown, keypress và keyup. Cả thuộc tính code (được thêm vào Chrome 48) và thuộc tính key (được thêm vào Chrome 51) đều giúp nhà phát triển dễ dàng lấy được những thông tin mà nếu không dùng các thuộc tính cũ thì nhà phát triển có thể dễ dàng lấy thông tin khó.
Thuộc tính của mã
Đầu tiên là thuộc tính code. Chuỗi này được đặt thành một chuỗi biểu thị phím đã nhấn để tạo KeyboardEvent mà không tính đến bố cục bàn phím hiện tại (ví dụ: QWERTY so với Dvorak), ngôn ngữ (ví dụ: tiếng Anh và tiếng Pháp) hoặc phím bổ trợ bất kỳ.
Điều này rất hữu ích khi bạn quan tâm đến phím vật lý nào được nhấn, thay vì ký tự tương ứng. Ví dụ: nếu bạn đang viết trò chơi, có thể bạn muốn một bộ phím nhất định để di chuyển người chơi theo các hướng khác nhau và tốt nhất việc liên kết đó nên độc lập với bố cục bàn phím.
Thuộc tính khoá
Tiếp theo, chúng ta có thuộc tính key mới. Chuỗi này cũng được thiết lập thành một chuỗi, nhưng trong khi code trả về thông tin về phím vật lý đã nhấn, thì key chứa ký tự được tạo bằng phím đó, có tính đến bố cục bàn phím hiện tại, ngôn ngữ và phím bổ trợ.
Việc xem xét giá trị của thuộc tính key sẽ hữu ích khi bạn cần biết ký tự nào sẽ hiện trên màn hình như thể người dùng đã nhập văn bản.
Điều này có nghĩa là gì trong thực tế?
Để đưa ra một ví dụ cụ thể, hãy giả sử người dùng của bạn đang sử dụng bàn phím Hoa Kỳ có bố cục bàn phím QWERTY. Việc nhấn phím Q vật lý trên bàn phím đó sẽ dẫn đến KeyboardEvent có thuộc tính code được đặt thành "KeyQ". Điều này luôn áp dụng bất kể bố cục bàn phím và mọi phím bổ trợ khác. Để so sánh, trên bàn phím tiếng Pháp (AZERTY) phím này vẫn sẽ có code là "KeyQ" mặc dù chữ cái in trên nắp phím là "a".
Việc nhấn phím Q vật lý trên chính bàn phím Hoa Kỳ đó thường sẽ tạo ra một KeyboardEvent với key được đặt thành "q" (không có phím bổ trợ) hoặc "Q" (với Shift hay CapsLock) hoặc "œ" (với OS X, với Alt). Trên bàn phím AZERTY của Pháp, phím này sẽ tạo ra một chữ "a" (hoặc "A" với Shift hoặc CapsLock). Đối với các bố cục bàn phím khác, giá trị key có thể là "й", "ض", "ㅂ", "た" hoặc một số ký tự khác.
Xem lại ví dụ về trò chơi trước đó, nếu muốn trò chơi sử dụng các phím WASD để chuyển động, bạn có thể sử dụng thuộc tính code và kiểm tra "KeyW", "KeyA", "KeyS" và "KeyD". Tính năng này sẽ hoạt động đối với tất cả bàn phím và mọi bố cục — ngay cả bàn phím AZERTY hoán đổi vị trí của các phím "w" và "z".
Bàn phím ảo
Bạn sẽ nhận thấy rằng cho đến nay, chúng tôi vẫn tập trung vào hành vi giả sử bàn phím vật lý. Còn những người dùng đang nhập bằng bàn phím ảo hoặc thiết bị nhập thay thế thì sao? Quy cách cung cấp hướng dẫn chính thức cho thuộc tính code. Tóm lại, bàn phím ảo bắt chước bố cục của bàn phím tiêu chuẩn sẽ dẫn đến việc đặt thuộc tính code thích hợp. Tuy nhiên, bàn phím ảo sử dụng bố cục phi truyền thống có thể khiến code không được thiết lập.
Mọi thứ đơn giản hơn đối với thuộc tính key. Bạn nên đặt thuộc tính này thành một chuỗi dựa trên ký tự mà người dùng đã nhập (ảo).
Dùng thử
Gary Kačmarčík đã tập hợp một bản minh hoạ tuyệt vời để trực quan hoá tất cả các thuộc tính có liên quan đến KeyboardEvent:
Hỗ trợ trên nhiều trình duyệt
Hỗ trợ cho thuộc tính code, tại thời điểm viết bài này, chỉ giới hạn ở Chrome 48 trở lên, Opera 35 trở lên và Firefox 44 trở lên.
Thuộc tính key được hỗ trợ trong Firefox 44 trở lên, Chrome 51 trở lên và Opera 38+ với hỗ trợ một phần trong Internet Explorer 9+ và Edge 13 trở lên.