Trình kiểm tra Keycode

Trình kiểm tra Keycode là một công cụ dành cho nhà phát triển cho phép bạn kiểm tra ngay lập tức cách các phím bàn phím bạn nhấn trong trình duyệt của mình được nhận diện dưới dạng dữ liệu sự kiện trong JavaScript.

Trong phát triển frontend, việc phát hiện phím chính xác được yêu cầu khi triển khai các phím tắt hoặc điều khiển trò chơi dựa trên đầu vào của người dùng. Với công cụ này, bạn có thể nhận các thuộc tính phím như event.key, event.code và event.keyCode một cách nhanh chóng và sao chép chúng chỉ bằng một cú nhấp chuột. Nó cũng dễ dàng để kiểm tra hành vi của các bố cục bàn phím khác nhau (chẳng hạn như JIS vs US) và sự kết hợp với các phím bổ trợ như Shift và Ctrl.

Bạn cũng có thể kiểm tra lịch sử nhập bàn phím của mình và kiểm tra một cách an toàn việc triệt tiêu các hành động mặc định của trình duyệt (chẳng hạn như di chuyển Tab hoặc cuộn Space) trong trình duyệt khi e.preventDefault() được bật.

event.key

Biểu thị ký tự hoặc chức năng thực sự được người dùng nhập vào. Ví dụ: nhấn Shift + 1 trên bàn phím US sẽ mang lại ! làm event.key. Đây là thuộc tính được khuyến nghị nhiều nhất để đánh giá đầu vào logic.

event.code

Cho biết vị trí vật lý của phím được nhấn. Bất kể bố cục ngôn ngữ bàn phím, nhấn phím ở vị trí "A" sẽ luôn trả về KeyA. Điều này rất hữu ích cho các hành động phụ thuộc vào bố cục vật lý, như di chuyển WASD trong trò chơi.

event.keyCode / event.which

Trả về mã số dành riêng cho hệ thống được gán cho phím đã nhấn (ví dụ: 65 cho A). Mặc dù được sử dụng từ lâu trong quá trình phát triển JavaScript, nhưng hiện tại chúng đã không còn được sử dụng. Chúng chỉ nên được sử dụng để kiểm tra khả năng tương thích ngược.

event.location

Một số cho biết vùng vật lý của bàn phím nơi phím được nhấn. Nó có thể phân biệt giữa các phím tiêu chuẩn (0), phím bổ trợ trái (1), phím bổ trợ phải (2) và các phím numpad (3).

preventDefault()

Một phương thức JavaScript được sử dụng để hủy hành vi mặc định của trình duyệt được kích hoạt bởi một sự kiện, chẳng hạn như cuộn xuống trang khi nhấn phím Space.

Hỏi:Tôi có thể sử dụng công cụ này trên điện thoại thông minh hoặc máy tính bảng không?

Nó hoạt động bình thường nếu bạn có bàn phím vật lý được kết nối. Tuy nhiên, với bàn phím phần mềm trên màn hình, sự kiện keydown có thể không kích hoạt chính xác tùy thuộc vào hệ điều hành hoặc việc triển khai trình duyệt, hoặc nó có thể luôn trả về cùng một mã phím (ví dụ: 229). Công cụ này được thiết kế để sử dụng với bàn phím vật lý.

Hỏi:Tôi nên sử dụng event.key hay event.code?

Điều này phụ thuộc vào trường hợp sử dụng của bạn. Nếu bạn muốn đánh giá ý nghĩa của phím hoặc ký tự được nhập (ví dụ: 'Nhấn Enter để gửi'), hãy sử dụng event.key. Mặt khác, nếu bạn muốn các hành động dựa trên vị trí vật lý trên bàn phím (ví dụ: 'Di chuyển nhân vật bằng W, A, S, D'), thì sử dụng event.code là phương pháp tốt nhất.

Hỏi:Tôi có thể ngăn các phím tắt như F5 hoặc Ctrl+W không?

Ngay cả khi bạn sử dụng hàm e.preventDefault() của JavaScript, bạn có thể không thể ngăn chặn hoàn toàn các phím tắt mạnh mẽ được dành riêng ở cấp độ bảo mật hoặc hệ điều hành/trình duyệt, chẳng hạn như đóng tab, tải lại cửa sổ hoặc mở công cụ dành cho nhà phát triển của trình duyệt.

Hỏi:Tại sao event.keyCode bị phản đối sử dụng (deprecated)?

Bởi vì giá trị số được trả về có thể thay đổi tùy thuộc vào trình duyệt, hệ điều hành và bố cục bàn phím, dẫn đến các vấn đề về khả năng tương thích. Hiện tại, chúng tôi khuyên bạn nên sử dụng event.key hoặc event.code.

Hỏi:Dữ liệu phím được nhập có được gửi đến máy chủ không?

Không, nó không được gửi. Tất cả quá trình xử lý được hoàn tất bằng JavaScript trong trình duyệt của bạn và lịch sử nhập phím của bạn không bao giờ được gửi đến hoặc lưu trên bất kỳ máy chủ bên ngoài nào.

Dưới đây là các kịch bản phát triển điển hình trong đó việc kiểm tra keycode là cần thiết.