Mã phím Tab trong JavaScript

Với Tab, event.key là Tab, event.code là Tab và keyCode (đã lỗi thời) là 9. Nhấn phím bất kỳ trong Key Code Finder để xem giá trị của nó trực tiếp.

Cập nhật

Thuộc tínhGiá trị
event.keyTab
event.codeTab
event.keyCode / which (đã lỗi thời)9

Cách nhận diện Tab

document.addEventListener('keydown', (event) => {
  if (event.key === "Tab") {
    // Tab was pressed
  }
});

Dùng event.key để phản ứng theo ý nghĩa của phím (giá trị này theo bố cục bàn phím) và event.code để xác định vị trí vật lý của phím, ví dụ WASD trong game. keyCode và which đã lỗi thời: chúng vẫn hoạt động, nhưng giá trị khác nhau giữa các trình duyệt và bố cục.

Trình duyệt xử lý Tab như thế nào

Tab chuyển tiêu điểm sang phần tử có thể focus tiếp theo, còn Shift+Tab quay về phần tử trước đó. Chỉ bắt phím này trong các widget thực sự cần, chẳng hạn trình soạn code, và luôn cho người dùng bàn phím một cách thoát ra (ví dụ nhấn Escape rồi Tab).

Trong React

<input onKeyDown={(e) => { if (e.key === "Tab") { /* … */ } }} />

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

Keycode của Tab là gì?
9. Tuy nhiên đây là thuộc tính đã lỗi thời, nên trong code mới hãy dùng event.key (“Tab”) hoặc event.code (Tab).
Sự khác nhau giữa event.key và event.code là gì?
event.key là ký tự hoặc hành động mà phím tạo ra theo bố cục hiện tại; event.code là vị trí vật lý của phím, giống nhau trên mọi bố cục.
Nên dùng keydown hay keypress?
keydown. Sự kiện keypress đã lỗi thời và không kích hoạt với các phím không tạo ký tự, như Escape hay các phím mũi tên.