Tìm KeyCode JavaScript
Nhấn phím bất kỳ để xem các giá trị keyCode, key, code và which của phím đó
Bắt phím
Nhấp vào đây và nhấn một phím
Sự kiện bàn phím chỉ được ghi nhận trong vùng này. Phím Tab sẽ được ghi lại rồi chuyển tiêu điểm sang điều khiển kế tiếp.
Để có đầy đủ sự kiện bàn phím, hãy dùng bàn phím vật lý. Bàn phím trên di động có thể thiếu một số thuộc tính.
Các lần nhấn phím gần đây
10 lần nhấn phím gần nhất của bạn sẽ hiện ở đây.
Chi tiết sự kiện bàn phím
event.keyevent.codeevent.keyCodeĐã lỗi thờievent.whichĐã lỗi thờievent.locationevent.repeatPhím bổ trợ
Nhấp vào vùng bắt phím để xem một sự kiện bàn phím.
Giới thiệu công cụ Tìm KeyCode JavaScript
Công cụ Tìm KeyCode JavaScript là công cụ tương tác miễn phí dành cho lập trình viên, hiển thị ngay mọi thuộc tính của sự kiện bàn phím khi bạn nhấn một phím bất kỳ. Dù bạn đang xây dựng phím tắt, điều khiển trò chơi hay điều hướng thân thiện với người khuyết tật, việc biết chính xác giá trị của event.key, event.code, event.keyCode và event.which là điều cần thiết để viết JavaScript đáng tin cậy, chạy ổn định trên nhiều trình duyệt.
Các ứng dụng web hiện đại phụ thuộc nhiều vào xử lý sự kiện bàn phím, từ kiểm tra biểu mẫu đến công cụ cộng tác theo thời gian thực. Tiện ích tra cứu keycode này loại bỏ việc đoán mò bằng cách hiển thị mã phím vật lý, giá trị phím logic, mã vị trí và toàn bộ trạng thái phím bổ trợ (Shift, Ctrl, Alt, Meta) ngay khi bạn nhấn phím, chạy thẳng trong trình duyệt mà không cần cài đặt gì.
Khác với các bảng tra cứu keycode tĩnh, công cụ kiểm tra sự kiện phím JavaScript trực tiếp này bắt các sự kiện thật của trình duyệt để bạn kiểm chứng hành vi trên nhiều hệ điều hành và kiểu bố trí bàn phím khác nhau. Công cụ cũng đánh dấu rõ những thuộc tính đã lỗi thời, giúp bạn viết mã bền vững theo chuẩn W3C Keyboard Event hiện hành.
Tính năng chính
- Hiển thị theo thời gian thực
event.key,event.code,event.keyCode,event.whichvàevent.location - Chỉ báo trực quan cho phím bổ trợ, hiển thị trạng thái Shift, Ctrl, Alt và Meta
- Huy hiệu lỗi thời trên các thuộc tính cũ như keyCode và which
- Sao chép giá trị của từng thuộc tính sự kiện chỉ với một lần nhấp
- Xuất toàn bộ dữ liệu phím thành đối tượng JSON đã định dạng
- Bảng lịch sử lưu 10 lần nhấn phím gần nhất để bạn đối chiếu
- Tự động phân biệt vị trí phím trái, phải và bàn phím số
- Hiển thị phím bàn phím dạng hình ảnh để nhận biết dễ dàng
- Hoạt động với mọi phím, kể cả phím chức năng, phím mũi tên và ký tự đặc biệt
- Giao diện thích ứng hoàn toàn, có hỗ trợ chế độ tối
Cách dùng công cụ Tìm KeyCode JavaScript
- Chọn vùng nhập: Nhấp vào bất kỳ đâu trong vùng nhấn phím viền nét đứt ở đầu công cụ để bắt đầu lắng nghe bàn phím.
- Nhấn một phím bất kỳ: Nhấn phím nào trên bàn phím và mọi thuộc tính của sự kiện sẽ hiện ngay trong lưới thuộc tính bên dưới.
- Xem trạng thái phím bổ trợ: Kiểm tra các chỉ báo Shift, Ctrl, Alt và Meta để biết phím bổ trợ nào đang được giữ khi nhấn phím.
- Sao chép giá trị: Nhấp biểu tượng sao chép cạnh một thuộc tính để chép giá trị của nó, hoặc dùng nút “Copy All as JSON” để xuất tất cả thuộc tính cùng lúc.
- So sánh các phím: Nhấn lần lượt nhiều phím rồi cuộn xuống bảng lịch sử để đối chiếu mã của chúng cạnh nhau.
- Xóa và làm lại: Nhấn nút Clear để đặt lại toàn bộ dữ liệu và bắt đầu một phiên kiểm tra mới.
Trường hợp sử dụng
- Phát triển phím tắt: Xác định đúng giá trị key và code để triển khai phím tắt tùy chỉnh trong ứng dụng web.
- Điều khiển trò chơi: Gán phím vật lý cho hành động trong game bằng cách kiểm tra event.code để có phím gán không phụ thuộc vào kiểu bố trí bàn phím.
- Kiểm tra khả năng tiếp cận: Xác minh điều hướng bằng bàn phím hoạt động đúng và mọi phần tử tương tác đều phản hồi với các phím mong đợi.
- Chuyển đổi mã cũ: Tìm giá trị event.key hiện đại tương ứng với các giá trị event.keyCode đã lỗi thời trong những dự án cũ.
- Gỡ lỗi nhiều trình duyệt: Xác nhận sự kiện phím cho ra giá trị nhất quán trên Chrome, Firefox, Safari và Edge.
- Kiểm tra dữ liệu nhập biểu mẫu: Xác định chính xác giá trị phím để cho phép hoặc chặn một số ký tự nhất định trong ô văn bản.
- Viết hướng dẫn và tài liệu: Tra nhanh dữ liệu keycode chính xác để đưa vào tài liệu hướng dẫn và tài liệu tham khảo cho lập trình viên.
- Phân biệt bàn phím số với bàn phím chính: Dùng thuộc tính location để phân biệt phím số trên bàn phím số và phím số thông thường.
Câu hỏi thường gặp
Sự khác nhau giữa event.key và event.code là gì?
event.key trả về giá trị logic của phím (ví dụ “a” hoặc “A” tùy theo Shift), còn event.code trả về phím vật lý trên bàn phím (ví dụ “KeyA”) bất kể phím bổ trợ hay kiểu bố trí bàn phím. Hãy dùng event.key cho việc nhập ký tự và event.code cho phím tắt dựa theo vị trí phím.
event.keyCode còn an toàn để dùng không?
event.keyCode đã chính thức bị W3C đánh dấu lỗi thời và có thể hoạt động không nhất quán giữa các trình duyệt. Với dự án mới, hãy dùng event.key hoặc event.code. Tuy nhiên, nhiều codebase cũ vẫn dựa vào keyCode nên công cụ này vẫn hiển thị nó để bạn tham khảo khi cần tương thích ngược.
Vì sao trường location quan trọng?
Thuộc tính event.location giúp phân biệt các phím xuất hiện ở nhiều vị trí trên bàn phím, chẳng hạn Shift trái và Shift phải, hoặc hàng số và bàn phím số. Điều này rất quan trọng với những ứng dụng cần phân biệt các phím trùng nhau.
Công cụ này có miễn phí không?
Có, công cụ Tìm KeyCode JavaScript hoàn toàn miễn phí, không cần đăng ký, không giới hạn lượt dùng và không có phí ẩn. Bạn có thể dùng bao nhiêu lần tùy ý cho việc phát triển và kiểm thử.
Dữ liệu của tôi có an toàn không?
Chắc chắn. Toàn bộ việc nhận diện phím diễn ra hoàn toàn trong trình duyệt của bạn bằng sự kiện bàn phím JavaScript gốc. Không có thao tác gõ phím hay dữ liệu sự kiện nào được gửi đến máy chủ. Dữ liệu bạn nhập luôn riêng tư trên thiết bị của bạn.
Công cụ này có chạy trên thiết bị di động không?
Công cụ hoạt động tốt nhất với bàn phím vật lý. Trên thiết bị di động, bàn phím ảo có thể không kích hoạt đầy đủ các thuộc tính sự kiện một cách nhất quán. Để có kết quả đáng tin cậy, hãy dùng máy tính để bàn hoặc laptop, hoặc kết nối bàn phím ngoài với thiết bị di động của bạn.
Mẹo và thực hành tốt nhất
- Ưu tiên event.key khi nhập ký tự: Giá trị này tự động tính đến kiểu bố trí bàn phím, ngôn ngữ và trạng thái phím bổ trợ.
- Dùng event.code cho điều khiển trò chơi: Vị trí phím vật lý luôn nhất quán bất kể kiểu bố trí bàn phím của người dùng (QWERTY, AZERTY, Dvorak).
- Luôn thử các tổ hợp phím bổ trợ: Nhấn Ctrl+Shift+Phím hoặc Alt+Phím để xác nhận trình lắng nghe phím tắt của bạn bắt đúng tổ hợp.
- Xem bảng lịch sử để tìm quy luật: So sánh nhiều lần nhấn phím giúp bạn phát hiện điểm không nhất quán hoặc tìm đúng mã nhanh hơn.
- Xuất JSON làm tài liệu: Dùng tính năng “Copy All as JSON” để dán dữ liệu phím chính xác thẳng vào chú thích mã nguồn hoặc tài liệu cho lập trình viên.
- Kiểm thử trên nhiều trình duyệt: Giá trị sự kiện phím có thể khác nhau giữa các trình duyệt, nhất là với phím đặc biệt. Hãy luôn kiểm tra các trình duyệt mục tiêu của bạn.