Hiện event.key, event.code, keyCode và event.location cho mọi phím Trạng thái phím bổ trợ Ctrl, Shift, Alt, Meta và phím giữ lặp Câu lệnh if JavaScript sẵn sàng sao chép cho phím vừa nhấn Lịch sử các phím vừa nhấn Chặn cuộn trang khi nhấn Space và phím mũi tên lúc đang thử

Kiểm tra mã phím JavaScript - event.key, event.code và keyCode

event.key, event.code và keyCode khác nhau thế nào

Mỗi lần nhấn phím trong trình duyệt sẽ phát ra một KeyboardEvent với nhiều thuộc tính. event.key là giá trị phím tạo ra, như "a", "A", "Enter" hay "ArrowUp", và tuân theo bố cục bàn phím cùng trạng thái Shift của người dùng. event.code mô tả phím vật lý, như "KeyA" hay "Digit1", nên giữ nguyên trên bàn phím QWERTY, AZERTY hay Dvorak. keyCode và which là các mã số cũ, đã lỗi thời và không nhất quán giữa các trình duyệt và bố cục. Code hiện đại nên dùng event.key cho văn bản và phím tắt, và event.code khi vị trí phím quan trọng, như điều khiển WASD trong game.

Tính năng

• Hiện event.key, event.code, keyCode và event.location cho mọi phím
• Trạng thái phím bổ trợ Ctrl, Shift, Alt, Meta và phím giữ lặp
• Câu lệnh if JavaScript sẵn sàng sao chép cho phím vừa nhấn
• Lịch sử các phím vừa nhấn
• Chặn cuộn trang khi nhấn Space và phím mũi tên lúc đang thử

Riêng tư từ thiết kế

Sự kiện phím chỉ được đọc trên trang này, trong trình duyệt của bạn. Không phím nào bị ghi lại hay gửi đi.

Không keylog, 100% phía client.

Cách dùng công cụ Kiểm tra phím

1
Bấm vào bất kỳ đâu trên trang để trang nhận tiêu điểm, rồi nhấn một phím. Trên điện thoại, chạm vào ô nhập để mở bàn phím ảo.
2
Đọc giá trị lớn: event.key. Bên dưới là event.code và keyCode kiểu cũ.
3
Xem các thẻ để biết vị trí phím (Shift trái hay phải, bàn phím số) và phím bổ trợ đang giữ, rồi sao chép giá trị bằng một cú nhấp.
4
Sao chép câu lệnh if được tạo vào hàm xử lý keydown. Lịch sử hiển thị các phím gần đây để bạn so sánh tổ hợp.

Ví dụ thực tế

Phím tắt

Với tìm kiếm Ctrl+K hoặc Cmd+K, nhấn tổ hợp rồi dùng event.key === "k" cùng event.ctrlKey || event.metaKey, chạy được cả trên Windows và macOS.

Điều khiển trong game

Dùng event.code ("KeyW", "KeyA", "KeyS", "KeyD") để phím di chuyển giữ nguyên vị trí trên bàn phím AZERTY và các bố cục khác, nơi event.key sẽ là "z" hay "q".

Gửi tin khi nhấn Enter

Kiểm tra event.key === "Enter" và !event.shiftKey trong ô chat để gửi khi nhấn Enter và xuống dòng bằng Shift+Enter.

Bàn phím số và phím theo bên

Phân biệt Enter trên bàn phím số (location 3) với Enter chính, hay Shift trái và phải (location 1 và 2) khi ứng dụng cần.

Câu hỏi thường gặp

Nên dùng event.key hay event.code?+

Dùng event.key cho mọi thứ gắn với ký tự, như phím tắt có chữ cái, nhập văn bản, Escape và Enter. Dùng event.code khi vị trí vật lý quan trọng, như game hay phím nóng không phụ thuộc bố cục.

Vì sao keyCode bị lỗi thời?+

Giá trị keyCode chưa bao giờ được chuẩn hóa: chúng khác nhau giữa trình duyệt, bố cục bàn phím và giữa keydown với keypress. Chuẩn KeyboardEvent đã thay bằng key và code, được mọi trình duyệt hiện đại hỗ trợ.

Vì sao bàn phím điện thoại báo "Unidentified" hoặc 229?+

Bàn phím ảo thường gửi sự kiện composition thay vì mã phím thật, nhất là khi bật tự sửa hay bộ gõ IME. Trên di động hãy nghe sự kiện input hoặc beforeinput để lấy văn bản.

Vì sao một số phím tắt không tới được trang?+

Trình duyệt hoặc hệ điều hành xử lý một số tổ hợp trước, như Ctrl+W, Ctrl+T, Cmd+Q hay Alt+Tab, nên trang web không thể bắt hay chặn chúng.