Thông tin mã phím (Keycode) – Keycode info

Giới thiệu chung về công cụ thông tin mã phím

Khi xây dựng các tính năng tương tác web như form nhập liệu, game trên trình duyệt hay hệ thống phím tắt (hotkeys), việc bắt chính xác sự kiện bàn phím là vô cùng quan trọng. Tuy nhiên, việc ghi nhớ các mã số (keycode) tương ứng với từng phím vật lý là điều gần như không thể.

Để giúp các lập trình viên frontend tiết kiệm thời gian tra cứu tài liệu, Công cụ Việt đã xây dựng tiện ích thông tin mã phím trực quan. Bạn chỉ cần thả tay lên bàn phím, hệ thống sẽ lập tức bắt tín hiệu và số hóa mọi thông tin từ phím bấm đó, giúp quá trình gỡ lỗi (debug) diễn ra thuận lợi và trơn tru hơn bao giờ hết.

Giải thích các thuật ngữ liên quan đến sự kiện bàn phím

Để thao tác chính xác với công cụ, bạn cần hiểu rõ cấu trúc của một đối tượng KeyboardEvent trong JavaScript:

• event.keyCode / event.which: Là một mã số nguyên đại diện cho phím vừa được nhấn (ví dụ: phím Enter là 13, phím Space là 32). Mặc dù hiện tại đã bị đánh dấu là lỗi thời, nó vẫn được hỗ trợ rộng rãi trên các trình duyệt cũ.

• event.key: Trả về giá trị ký tự thực tế của phím được nhấn, có phân biệt chữ hoa, chữ thường hoặc ngôn ngữ bàn phím.

• event.code: Trả về chuỗi định danh vật lý của phím trên bàn phím (ví dụ: KeyA, Space), không phụ thuộc vào bố cục (layout) hay ngôn ngữ đang gõ.

• event.location: Xác định vị trí của phím nếu bàn phím có nhiều phím cùng chức năng (ví dụ: Shift trái, Shift phải hoặc các số trên bàn phím phụ Numpad).

Mục đích và lợi ích của công cụ

• Tiết kiệm thời gian tra cứu: Không cần phải lên mạng tìm kiếm các bảng “keycode list” dài dòng, kết quả hiển thị ngay lập tức dưới ngón tay bạn.

• Hỗ trợ gỡ lỗi toàn diện: Kiểm tra xem các phím bổ trợ như Ctrl, Alt, Shift có đang được ghi nhận đồng thời cùng phím chính hay không để thiết lập tổ hợp phím tắt chuẩn xác.

• Ngăn chặn lỗi xung đột: Giúp kiểm tra trước các phím đặc biệt để viết mã ngăn chặn hành vi cuộn trang hay làm mới trang không mong muốn.

Các tính năng hỗ trợ

• Hiển thị đa thông số theo thời gian thực: Bóc tách ngay lập tức một lượt nhấn phím thành các thuộc tính key, code, keyCode và location.

• Ngăn chặn hành vi mặc định (Prevent Default): Nút gạt bật/tắt tính năng giúp bạn test các phím như Space (không bị cuộn trang) hay F5 (không bị tải lại trang) một cách an toàn ngay trên form.

• Nhận diện phím bổ trợ (Modifiers): Giao diện tự động làm sáng các huy hiệu Ctrl, Shift, Alt hoặc Meta (Windows/Command) nếu chúng được giữ cùng lúc với phím khác.

• Ghi log lịch sử: Lưu lại danh sách trình tự các phím vừa gõ để bạn dễ dàng theo dõi và kiểm tra các tổ hợp phím phức tạp.

Đối tượng người dùng

• Lập trình viên Web & Frontend: Thường xuyên sử dụng tiện ích trên congcuviet.com để lấy mã phím chuẩn khi lập trình các tính năng tìm kiếm, điều hướng menu, đóng mở modal.

• Nhà phát triển Web Game (HTML5/Canvas): Cần ánh xạ (map) các phím W, A, S, D hoặc cụm phím mũi tên để điều khiển nhân vật di chuyển chuẩn xác.

• Chuyên gia UI/UX & Web Accessibility: Thiết lập và kiểm thử trang web để đảm bảo người khuyết tật có thể điều hướng 100% bằng bàn phím thông qua các phím Tab và Enter.

Tại sao keyCode bị đánh dấu lỗi thời và nên dùng event.key hay event.code?

Nhiều lập trình viên lâu năm vẫn quen sử dụng event.keyCode === 13 để bắt sự kiện phím Enter. Tuy nhiên, theo chuẩn MDN Web Docs mới nhất, thuộc tính này đã bị đánh dấu lỗi thời (deprecated) vì hoạt động thiếu nhất quán giữa các trình duyệt và thiết bị khác nhau.

Thay vào đó, chuẩn web hiện đại khuyến nghị sử dụng event.key hoặc event.code. Nếu bạn quan tâm đến ý nghĩa ký tự mà người dùng muốn nhập (ví dụ: gõ ‘a’ hay ‘A’, gõ tiếng Việt hay tiếng Anh), hãy dùng event.key. Ngược lại, nếu bạn đang làm game và chỉ quan tâm đến vị trí vật lý của phím (như cụm phím WASD để di chuyển) mà không bận tâm họ đang bật Unikey hay gõ ngôn ngữ khác, event.code là lựa chọn hoàn hảo nhất.

Cách phân biệt các phím trùng lặp chức năng bằng event.location

Trên một bàn phím tiêu chuẩn (Full-size), bạn sẽ có hai phím Shift, hai phím Ctrl, hai phím Alt và hai bộ phím số (một hàng ngang bên trên và một cụm Numpad bên phải). Khi người dùng nhấn số 1, làm sao để trình duyệt phân biệt được họ đang bấm ở đâu?

Đây là lúc thuộc tính event.location phát huy tác dụng. Nó trả về một mã số nguyên giúp định vị khu vực phím: 0 (Cơ bản/Tiêu chuẩn), 1 (Bên trái), 2 (Bên phải), hoặc 3 (Khu vực Numpad). Bằng cách kết hợp event.key và event.location, bạn có thể viết logic kịch bản điều khiển riêng biệt, ví dụ như biến cụm Numpad thành bảng phím tắt kỹ năng trong ứng dụng mà không làm ảnh hưởng đến cụm số nhập liệu thông thường.

Quản lý hành vi trình duyệt mặc định với phương thức preventDefault

Một “nỗi đau” thường gặp khi xử lý sự kiện bàn phím trên web là sự can thiệp của các phím hệ thống. Ví dụ điển hình: khi bạn thiết kế một web game yêu cầu bấm phím Space để nhân vật nhảy lên, nhưng mỗi lần bấm, toàn bộ trang web lại bị cuộn tuột xuống dưới. Hoặc khi nhấn phím Enter trong ô input, trang web lại tự động tải lại (submit form).

Để xử lý triệt để vấn đề này, tiện ích của chúng tôi tích hợp sẵn nút gạt “Ngăn cuộn trang / Hành vi mặc định”. Về mặt mã nguồn, nút này kích hoạt phương thức event.preventDefault(). Khi được gọi, hàm này sẽ chặn đứng mọi hành động mặc định mà trình duyệt định gán cho phím bấm đó, trả lại toàn quyền quyết định logic xử lý cho mã JavaScript của bạn.