Công cụ Tìm Mã Khóa JavaScript

Cách hoạt động

1. Nhấn một phím: nhấp vào ô nhập và nhấn bất kỳ phím nào, chữ cái, số, phím chức năng, mũi tên, phím bổ trợ hoặc phím đặc biệt.
2. Đọc mã phím: công cụ hiển thị tức thì các giá trị event.key, event.code, event.keyCode (kế thừa) và charCode của phím.
3. Sử dụng trong mã của bạn: sao chép các giá trị chính xác cần thiết cho trình lắng nghe sự kiện bàn phím hoặc các phím tắt của bạn.

Tại sao sử dụng trình tìm keycode?

Sự kiện bàn phím JavaScript hiển thị nhiều thuộc tính khác nhau, key, code, keyCode, charCode và which, và biết cái nào để dùng và so sánh với giá trị nào luôn là điều khó khăn. Trình tìm KeyCode loại bỏ việc đoán mò bằng cách cho phép bạn nhấn một phím và xem ngay tất cả các thuộc tính sự kiện của nó. Vô giá cho việc xây dựng phím tắt bàn phím, xử lý các phím đặc biệt, triển khai hotkey và gỡ lỗi trình lắng nghe sự kiện bàn phím.

Tính năng

• Tất cả thuộc tính sự kiện: hiển thị event.key, event.code, event.keyCode, event.which và event.charCode cho mỗi lần nhấn.
• Phát hiện phím bổ trợ: chỉ ra liệu Shift, Ctrl, Alt và Meta có được giữ khi nhấn hay không.
• Hỗ trợ phím đặc biệt: hoạt động với các phím chức năng (F1–F12), mũi tên, Enter, Esc, Tab, Backspace và tất cả các phím đặc biệt khác.
• Lịch sử phím: lưu nhật ký các lần nhấn gần đây để so sánh nhiều phím.
• Sao chép giá trị: nhấp vào bất kỳ giá trị nào để sao chép trực tiếp vào bộ nhớ tạm.

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

Sự khác biệt giữa event.key và event.keyCode là gì?

event.key là tiêu chuẩn hiện đại, nó trả về chuỗi dễ đọc như « ArrowLeft » hoặc « Enter ». event.keyCode là mã số kế thừa (đã lỗi thời nhưng vẫn được hỗ trợ). Dùng event.key cho mã mới; event.keyCode để duy trì tương thích với trình duyệt cũ.

Làm thế nào để phát hiện Ctrl+S hoặc các tổ hợp phím khác?

Tổ hợp phím sử dụng event.key kết hợp với kiểm tra phím bổ trợ: if (event.ctrlKey && event.key === "s"). Nhấn Ctrl+S trong công cụ này để xem tất cả giá trị, sau đó tái tạo cùng điều kiện trong trình lắng nghe sự kiện của bạn.

Tại sao một số phím hiển thị cùng keyCode?

Giá trị keyCode chưa được chuẩn hóa và một số phím chia sẻ mã tùy theo ngữ cảnh. event.code đáng tin cậy hơn, nó xác định vị trí vật lý của phím (ví dụ « KeyA ») bất kể bố cục bàn phím, trong khi event.key phản ánh ký tự được phím đó tạo ra.

30 năm lịch sử sự kiện bàn phím trong JavaScript

Các sự kiện bàn phím có một lịch sử lộn xộn nổi tiếng trong DOM. Netscape Navigator 2 (1995) đã giới thiệu các handler ban đầu onkeydown, onkeypress và onkeyup với thuộc tính số keyCode, mà không có đặc tả; các trình duyệt đều phát minh ra các giá trị riêng của mình. Internet Explorer 4 (1997) đã thực hiện biến thể riêng với event.keyCode là thuộc tính duy nhất, trong khi Netscape giữ với event.which. DOM Level 2 Events (W3C, tháng 11/2000) đã chuẩn hóa luồng sự kiện (capture/bubble) nhưng đã rõ ràng bỏ qua các sự kiện bàn phím vì các nhà cung cấp không thể đồng ý. Kết quả: các nhà phát triển đã viết mã như e.keyCode || e.which trong hơn một thập kỷ. DOM Level 3 Events (W3C Working Draft 2003, Khuyến nghị 2018) cuối cùng đã giới thiệu event.key hiện đại (ký tự Unicode hoặc phím được đặt tên như «ArrowLeft») và event.code (vị trí phím vật lý như «KeyA», độc lập với bố cục), cùng với việc bãi bỏ keyCode, charCode và which. Đặc tả UI Events (W3C, đang tiếp tục) là ngôi nhà hiện đại của công việc này. Các trình duyệt bắt kịp dần dần: Chrome 51 (tháng 5/2016), Firefox 47 (tháng 6/2016), Safari 10.1 (tháng 3/2017) tất cả đã đưa hỗ trợ event.code. Sự kiện cũ keypress bị bãi bỏ để ủng hộ các sự kiện beforeinput và input.

5 thuộc tính, được giải mã

• event.key (hiện đại, sử dụng cái này). Ký tự hoặc phím được đặt tên được tạo ra. Chữ cái và chữ số cho bạn ký tự Unicode tôn trọng các bộ điều chỉnh và bố cục (Shift+a = «A», AZERTY vị trí Q = «a»). Các phím được đặt tên là các chuỗi như «Enter», «Escape», «ArrowLeft», «F5», «Control». Được định nghĩa trong UI Events.
• event.code (hiện đại, sử dụng cho trò chơi). Xác định phím vật lý trên bàn phím, độc lập với bố cục hoặc bộ điều chỉnh. Ví dụ: «KeyA», «Digit1», «ArrowUp», «ShiftLeft», «MetaLeft». Sử dụng cái này cho di chuyển WASD, điều hướng phong cách vim, và phím tắt mà nên bỏ qua bố cục bàn phím.
• event.keyCode (đã bãi bỏ). Mã số. 13 = Enter, 27 = Escape, 32 = Khoảng trắng, 37-40 = Mũi tên Trái/Lên/Phải/Xuống, 65-90 = A-Z, 112-123 = F1-F12. Giá trị không bao giờ được chuẩn hóa, chỉ trở nên nhất quán giữa các trình duyệt thông qua sự hội tụ. Tránh trong mã mới.
• event.which (đã bãi bỏ). Tương đương Netscape của keyCode. Đối với hầu hết các ký tự có thể in được và phím không thể in được, giống hệt với keyCode. Polyfill cũ e.keyCode || e.which xử lý các trường hợp một trong số đó là 0.
• event.charCode (đã bãi bỏ, chỉ trên keypress). Điểm mã Unicode của ký tự. 97 cho «a», 65 cho «A». Chỉ kích hoạt trên keypress (mà chính nó cũng bị bãi bỏ). Các sự kiện input và beforeinput là các thay thế hiện đại.
• Boolean bộ điều chỉnh. event.shiftKey, event.ctrlKey, event.altKey, event.metaKey (Command trên macOS, phím Windows trên Windows). Luôn kiểm tra các bộ điều chỉnh một cách rõ ràng: e.metaKey || e.ctrlKey cho «lưu» đa nền tảng (Cmd+S trên Mac, Ctrl+S trên Windows/Linux).
• event.location. Phân biệt các bộ điều chỉnh trái vs phải và bàn phím số. 0=tiêu chuẩn, 1=bộ điều chỉnh trái, 2=bộ điều chỉnh phải, 3=bàn phím số. Hữu ích để phân biệt Shift-trái vs Shift-phải cho các bố cục chơi game.

Nơi tra cứu mã phím thực sự quan trọng

• Phím tắt bàn phím ứng dụng. Cmd/Ctrl+S để lưu, Cmd/Ctrl+Z để hoàn tác, Cmd/Ctrl+K để mở bảng lệnh (Slack, Linear, GitHub, Notion đều sử dụng cái này từ khoảng 2020). Luôn sử dụng event.key cho phím có thể in được và một boolean bộ điều chỉnh cho meta-phím.
• Bảng lệnh và trình tìm fuzzy. Mẫu Cmd+K được Slack (2014) và Linear (2019) phổ biến. Lắng nghe phím tắt mở toàn cầu, sau đó xử lý điều hướng ArrowUp/ArrowDown, Enter để chọn, Escape để hủy.
• Trò chơi trình duyệt và phát triển trò chơi HTML5. Phaser, Babylon.js, Three.js. Luôn sử dụng event.code cho các phím di chuyển để WASD hoạt động trên bàn phím AZERTY (nơi «W» nằm ở vị trí «Z»). Sebastian Lague, Notch (nguyên mẫu Minecraft sớm), và các trò chơi itch.io tất cả đều rơi vào cái bẫy AZERTY này.
• Mẫu hình khả năng truy cập. Các hộp thoại modal cần Escape để đóng. Các widget Combobox cần ArrowDown/ArrowUp/Enter/Escape. Tooltip cần được đóng trên Escape. WAI-ARIA Authoring Practices Guide định nghĩa các mẫu hình tương tác bàn phím cho mọi widget phổ biến; event.key là tiêu chuẩn cho những kiểm tra đó.
• Triển khai trình chỉnh sửa văn bản và mã. Monaco (trình chỉnh sửa của VS Code trong trình duyệt), CodeMirror, ProseMirror, Lexical tất cả ánh xạ các sự kiện bàn phím tới các lệnh. Chúng sử dụng event.code cho các ràng buộc phím phong cách vim/emacs không phụ thuộc vào bố cục.
• Cải tiến UX biểu mẫu. Gửi khi Enter, mất tiêu điểm khi Escape, tiến tiêu điểm khi Tab. Phổ biến trong luồng thanh toán, thanh tìm kiếm, các trường tự động hoàn thành.
• Phím nóng tiện ích trình duyệt. Vimium, SurfingKeys, Tridactyl cung cấp điều hướng bàn phím cho toàn bộ web. Chúng lắng nghe ở cấp tài liệu và xử lý các chuỗi phím modal phức tạp (gg = đi lên đầu, giống vim).

Những lỗi phổ biến trong xử lý sự kiện bàn phím

• Sử dụng keyCode trong mã mới. Đã bãi bỏ kể từ DOM Level 3 (2018), không nhất quán về mặt lịch sử giữa các trình duyệt, và phá vỡ trên các bố cục không phải US (phím dấu phẩy có keyCode 188 trên US, 191 trên một số bàn phím Đức). Sử dụng event.key thay thế.
• Mã hóa cứng e.key === "w" cho di chuyển trò chơi. Trên bàn phím AZERTY (Pháp), phím W vật lý gõ «z». Người chơi với tới những gì họ nhớ là cụm WASD nhưng nhận đầu vào sai. Sử dụng event.code === "KeyW" thay thế, xác định vị trí vật lý.
• Chỉ kiểm tra ctrlKey cho «lưu». Trên macOS, Cmd+S là quy ước; ctrlKey là sai nhưng metaKey là đúng. Luôn kiểm tra cả hai: (e.metaKey || e.ctrlKey) && e.key === "s".
• Quên preventDefault trên các phím tắt được trình duyệt dành riêng. Chiếm Cmd+S mà không có preventDefault vẫn kích hoạt Save Page As. Cũng vậy cho Cmd+P (in), Ctrl+F (tìm trình duyệt), Ctrl+N (cửa sổ mới, không thể chặn được), Ctrl+Tab (Chrome không cho phép). Gọi e.preventDefault() trong handler.
• Bỏ qua thành phần IME. Phương pháp nhập tiếng Nhật, Trung Quốc, Hàn Quốc (IME) kích hoạt các sự kiện keydown trong khi người dùng đang sáng tác các ký tự. Kiểm tra e.isComposing hoặc sử dụng sự kiện compositionend trước khi kích hoạt handler phím tắt của bạn. Slack nổi tiếng đã làm hỏng việc này cho người dùng Nhật Bản vào năm 2017.
• Sử dụng sự kiện đã bãi bỏ keypress. Chỉ kích hoạt cho các phím tạo ký tự (không phải phím mũi tên, phím chức năng, v.v.). Đã bãi bỏ; sử dụng keydown cho phím tắt và input/beforeinput cho các thay đổi văn bản.
• Kích hoạt phím tắt trên mỗi lần lặp lại. Giữ một phím kích hoạt các sự kiện keydown lặp đi lặp lại. Đối với các hành động chuyển đổi (mở bảng, chuyển tab), kiểm tra e.repeat và thoát sớm để tránh đăng ký 30 lệnh «mở» khi người dùng vô tình giữ phím.

Thêm các câu hỏi thường gặp

Tại sao handler phím của tôi không kích hoạt khi người dùng có bàn phím không phải US?

Hầu như luôn vì bạn đang kiểm tra event.key cho một ký tự chỉ tồn tại với Shift trên bố cục đó. Trên bàn phím QWERTZ Đức, «/» là Shift+7 (không phải phím riêng của nó); trên AZERTY Pháp, các chữ số 0-9 được gõ bằng Shift+hàng-trên. Sử dụng event.code (phím vật lý) cho các phím tắt dựa trên vị trí, hoặc event.key cho các phím tắt dựa trên nội dung (nơi bạn thực sự muốn ký tự mà người dùng vừa gõ).

Làm thế nào tôi xử lý Cmd+K / Ctrl+K nhất quán giữa các nền tảng?

Thành ngữ tiêu chuẩn: if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }. Trên macOS, e.metaKey là phím Cmd; trên Windows/Linux, e.ctrlKey là điều người dùng mong đợi. Chấp nhận cả hai. Luôn preventDefault vì trình duyệt ràng buộc Cmd+K với «tập trung thanh địa chỉ» trong một số trình duyệt. Thêm !e.repeat để tránh kích hoạt khi giữ phím.

JavaScript có thể phát hiện phím nhấn toàn cầu bên ngoài trang không?

Không, và đây là theo thiết kế vì bảo mật. Trình duyệt chỉ kích hoạt các sự kiện bàn phím cho trang hoặc phần tử được tập trung. Tiện ích trình duyệt có thể lắng nghe với phạm vi rộng hơn bằng cách sử dụng API chrome.commands. Ứng dụng gốc trong Electron, Tauri, v.v., có thể sử dụng các hook toàn cầu cấp HĐH. Ứng dụng ngân hàng và 2FA dựa vào sự cô lập này: một tab độc hại không thể keylog trình quản lý mật khẩu của bạn.

Cách đúng để phát hiện «vừa nhấn» vs «đang giữ» là gì?

Đối với chuyển đổi, kiểm tra !e.repeat trong handler keydown, sự kiện đầu tiên có repeat: false, các sự kiện tự động lặp lại tiếp theo có repeat: true. Đối với các hành động liên tục (di chuyển trò chơi), theo dõi trạng thái phím trong Set: thêm trên keydown, xóa trên keyup, sau đó trong vòng lặp render kiểm tra keysHeld.has("KeyW"). Điều này tách rời đầu vào khỏi tốc độ khung hình và xử lý nhiều phím đồng thời (di chuyển + nhảy).

Có gì được gửi đến máy chủ khi tôi nhấn phím ở đây không?

Không. Các sự kiện phím được JavaScript bắt cục bộ và hiển thị trên trang này mà không có bất kỳ yêu cầu mạng nào. Mở tab Network trong DevTools, gõ; bạn sẽ thấy không có lưu lượng đi ra. An toàn để kiểm tra trong bất kỳ ngữ cảnh nào, bao gồm khám phá những gì mật khẩu hoặc phím tắt nhạy cảm tạo ra trên bàn phím của bạn.