Trong vài phiên bản Chrome gần đây, chúng tôi đã thêm 2 thành phần vào KeyboardEvent. Các thành phần này được dùng làm tham số truyền đến 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 có cách thức đơn giản để lấy thông tin mà nếu không thì sẽ khó khăn khi sử dụng các thuộc tính cũ.
Thuộc tính mã
Trước tiên là thuộc tính code. Giá trị này được đặt thành một chuỗi đại diện cho phím đã được 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 so với tiếng Pháp) hoặc bất kỳ phím sửa đổi nào.
Điều này hữu ích khi bạn quan tâm đến việc nhấn phím vật lý nào, thay vì ký tự tương ứng với phím đó. Ví dụ: nếu đang viết một trò chơi, bạn có thể muốn một nhóm phím nhất định để di chuyển người chơi theo nhiều hướng và việc ánh xạ đó phải độc lập với bố cục bàn phím.
Thuộc tính chính
Tiếp theo, chúng ta có thuộc tính key mới. Giá trị này cũng được đặt thành chuỗi, nhưng trong khi code trả về thông tin về phím vật lý đã được nhấn, thì key chứa ký tự do phím đó tạo ra, có tính đến bố cục bàn phím, ngôn ngữ và phím sửa đổi hiện tại.
Việc xem 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 thị trên màn hình như thể người dùng đã nhập vào một mục nhập văn bản.
Điều này có ý nghĩa 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ỳ với bố cục bàn phím QWERTY. Khi nhấn phím Q vật lý trên bàn phím đó, bạn sẽ thấy KeyboardEvent có thuộc tính code được đặt thành "KeyQ". Điều này luôn đúng bất kể bố cục bàn phím và bất kể phím bổ trợ nào khác. Để so sánh, trên bàn phím tiếng Pháp (AZERTY), phím này vẫn có code là "KeyQ" mặc dù chữ cái in trên phím là "a".
Việc nhấn phím Q thực trên cùng một bàn phím ở Hoa Kỳ thường sẽ tạo ra KeyboardEvent với key được đặt thành "q" (không có phím sửa đổi), hoặc "Q" (có Shift hoặc CapsLock) hoặc "œ" (trên OS X, có Alt). Trên bàn phím AZERTY tiếng Pháp, cùng một phím này sẽ tạo ra chữ cái "a" (hoặc "A" khi nhấn phím 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 để di chuyển, bạn có thể sử dụng thuộc tính code và kiểm tra "KeyW", "KeyA", "KeyS" và "KeyD". Cách này sẽ hoạt động với tất cả bàn phím và bố cục, ngay cả bàn phím AZERTY hoán đổi vị trí của phím "w" và "z".
Bàn phím ảo
Bạn sẽ nhận thấy rằng cho đến thời điểm này, chúng ta đã tập trung vào hành vi giả định có bàn phím thực. Còn những người dùng đang nhập trên bàn phím ảo hoặc thiết bị nhập liệu 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, một bàn phím ảo bắt chước bố cục của bàn phím tiêu chuẩn sẽ giúp bạn đặt thuộc tính code thích hợp, nhưng các bàn phím ảo sử dụng bố cục không truyền thống có thể khiến code không được đặt.
Mọi thứ sẽ đơ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 (ảo) đã nhập.
Dùng thử
Gary Kačmarčík đã tạo một bản minh hoạ tuyệt vời để trực quan hoá tất cả các thuộc tính liên kết với KeyboardEvent:
Hỗ trợ nhiều trình duyệt
Tính năng hỗ trợ thuộc tính code (tính đến 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 trở lên, với một phần hỗ trợ trong Internet Explorer 9 trở lên và Edge 13 trở lên.