Nút có mã khóa. Như các bạn đã biết phím mũi tên trái có mã 37. Phím mũi tên lên có mã 38 và bên phải có 39 và xuống có 40
Ví dụ
Sau đây là mã -
Document
Để chạy chương trình trên, lưu tên file là anyName. html[chỉ mục. html]. Nhấp chuột phải vào tệp và chọn tùy chọn “Mở bằng máy chủ trực tiếp” trong trình chỉnh sửa Mã VS
Các ứng dụng web thường sử dụng JavaScript để bắt chước các tiện ích máy tính để bàn như menu, chế độ xem dạng cây, trường văn bản có định dạng và bảng điều khiển tab. Các widget này thường bao gồm các thành phần
…
5 và …
6, về bản chất, không cung cấp chức năng bàn phím giống như các đối tác trên máy tính để bàn của chúng. Tài liệu này mô tả các kỹ thuật giúp các tiện ích JavaScript có thể truy cập được bằng bàn phímSử dụng tabindex
Theo mặc định, khi mọi người sử dụng phím tab để duyệt trang web, chỉ các yếu tố tương tác [như liên kết, điều khiển biểu mẫu] mới được tập trung. Với thuộc tính toàn cầu
…
7, tác giả cũng có thể làm cho các phần tử khác có thể được đặt tiêu điểm. Khi được đặt thành …
8, phần tử có thể được đặt tiêu điểm bằng bàn phím và tập lệnh. Khi được đặt thành …
9, phần tử có thể được đặt tiêu điểm theo tập lệnh, nhưng nó không trở thành một phần của thứ tự tiêu điểm bàn phímThứ tự các phần tử lấy tiêu điểm khi sử dụng bàn phím, theo mặc định là thứ tự nguồn. Trong những trường hợp đặc biệt, tác giả có thể muốn xác định lại thứ tự. Để làm điều này, tác giả có thể đặt
…
7 thành bất kỳ số dương nàoCảnh báo. tránh sử dụng các giá trị dương cho
…
7. Các phần tử có giá trị dương …
7 được đặt trước các phần tử tương tác mặc định trên trang, có nghĩa là tác giả trang sẽ phải đặt [và duy trì] giá trị …
7 cho tất cả các phần tử có thể đặt tiêu điểm trên trang bất cứ khi nào họ sử dụng một hoặc nhiều giá trị dương cho …
7Bảng sau mô tả hành vi của
…
7 trong các trình duyệt hiện đại…
7Có thể lấy nét bằng chuột hoặc JavaScript thông qua …
4Không thể điều hướng tab không hiện diệnTuân theo quy ước nền tảng của phần tử [có đối với điều khiển biểu mẫu, liên kết, v.v. ]. Tuân theo quy ước nền tảng của phần tử. tiêu cực [tôi. e. …
5]Có Không; . không [tôi. e. …
7]Có trong thứ tự tab liên quan đến vị trí của phần tử trong tài liệu [lưu ý rằng các phần tử tương tác như …
8 có hành vi này theo mặc định, chúng không cần thuộc tính]. tích cực [e. g. …
9]Có…
7 giá trị xác định vị trí của phần tử này theo thứ tự tab. các giá trị nhỏ hơn sẽ định vị các phần tử sớm hơn theo thứ tự tab so với các giá trị lớn hơn [ví dụ: …
51 sẽ được định vị trước …
52]Kiểm soát không phải bản địa
Các phần tử HTML gốc có tính tương tác, như
…
8, …
54 và …
55, đã có thể truy cập được bằng bàn phím, do đó, sử dụng một trong số chúng là cách nhanh nhất để làm cho các thành phần hoạt động với bàn phímTác giả cũng có thể làm cho bàn phím
…
5 hoặc …
6 có thể truy cập được bằng cách thêm …
7 của …
8. Điều này đặc biệt hữu ích cho các thành phần sử dụng các phần tử tương tác không tồn tại trong HTMLđiều khiển nhóm
Để nhóm các tiện ích con như menu, danh sách tab, lưới hoặc chế độ xem dạng cây, phần tử gốc phải theo thứ tự tab [_______17] và mỗi lựa chọn/tab/ô/hàng con cháu phải được xóa khỏi thứ tự tab [
…
5]. Người dùng sẽ có thể điều hướng các phần tử hậu duệ bằng các phím mũi tên. [Để biết mô tả đầy đủ về hỗ trợ bàn phím thường được mong đợi cho các tiện ích con điển hình, hãy xem Thực tiễn tác giả WAI-ARIA. ]Ví dụ dưới đây cho thấy kỹ thuật này được sử dụng với điều khiển menu lồng nhau. Sau khi tiêu điểm bàn phím nằm trên phần tử chứa
…
62, nhà phát triển JavaScript phải quản lý tiêu điểm và phản hồi các phím mũi tên theo chương trình. Để biết các kỹ thuật quản lý tiêu điểm bên trong các tiện ích, hãy xem phần "Quản lý tiêu điểm bên trong các nhóm" bên dưới…
0Điều khiển bị vô hiệu hóa
Khi điều khiển tùy chỉnh bị tắt, hãy xóa điều khiển đó khỏi thứ tự tab bằng cách đặt
…
5. Lưu ý rằng các mục bị tắt trong một tiện ích được nhóm [chẳng hạn như các mục menu trong menu] sẽ vẫn có thể điều hướng được bằng các phím mũi tênQuản lý tiêu điểm bên trong các nhóm
Khi người dùng rời khỏi một tiện ích con và quay lại, tiêu điểm sẽ quay lại thành phần cụ thể đã có tiêu điểm, ví dụ: mục cây hoặc ô lưới. Có hai kỹ thuật để thực hiện điều này
- Lưu động
7. tiêu điểm di chuyển theo chương trình…
65. quản lý tiêu điểm 'ảo'…
Kỹ thuật 1. tabindex lưu động
Việc đặt
…
7 của phần tử được đặt tiêu điểm thành "0" đảm bảo rằng nếu người dùng rời khỏi tiện ích và sau đó quay lại, thì mục đã chọn trong nhóm vẫn giữ được tiêu điểm. Lưu ý rằng việc cập nhật …
7 thành "0" cũng yêu cầu cập nhật mục đã chọn trước đó thành …
5. Kỹ thuật này liên quan đến việc di chuyển tiêu điểm theo chương trình để phản hồi các sự kiện quan trọng và cập nhật …
7 để phản ánh mục tiêu điểm hiện tại. Để làm điều nàyLiên kết một trình xử lý phím xuống với từng phần tử trong nhóm và khi một phím mũi tên được sử dụng để di chuyển đến phần tử khác
- lập trình áp dụng tiêu điểm cho phần tử mới,
- cập nhật
7 của phần tử tiêu điểm thành "0" và…
- cập nhật
7 của phần tử đã tập trung trước đó thành "-1"…
Đây là một ví dụ về chế độ xem dạng cây WAI-ARIA sử dụng kỹ thuật này
Lời khuyên
sử dụng yếu tố. tiêu điểm[] để đặt tiêu điểm
Không sử dụng
…
72, …
73 và …
74 để gửi tiêu điểm đến một phần tử. Các sự kiện tiêu điểm DOM chỉ được coi là thông tin. được hệ thống tạo ra sau khi nội dung nào đó được đặt tiêu điểm, nhưng không thực sự được sử dụng để đặt tiêu điểm. Sử dụng …
4 thay thếSử dụng onfocus để theo dõi tiêu điểm hiện tại
Đừng cho rằng tất cả các thay đổi tiêu điểm sẽ đến thông qua các sự kiện phím và chuột. các công nghệ hỗ trợ như trình đọc màn hình có thể đặt tiêu điểm thành bất kỳ phần tử có thể lấy tiêu điểm nào. Thay vào đó, hãy theo dõi tiêu điểm bằng cách sử dụng
…
76 và …
77…
76 và …
77 hiện có thể được sử dụng với mọi phần tử. Không có giao diện DOM tiêu chuẩn để lấy tiêu điểm tài liệu hiện tại. Nếu bạn muốn theo dõi trạng thái lấy nét, bạn có thể sử dụng tài liệu. activeElement để lấy phần tử đang hoạt động. Bạn cũng có thể sử dụng tài liệu. hasFocus để đảm bảo rằng tài liệu hiện tại có tiêu điểmKỹ thuật 2. …
65
…
Kỹ thuật này liên quan đến việc liên kết một trình xử lý sự kiện duy nhất với tiện ích bộ chứa và sử dụng
…
65 để theo dõi tiêu điểm "ảo". [Để biết thêm thông tin về ARIA, hãy xem phần tổng quan về các tiện ích và ứng dụng web có thể truy cập này. ]Thuộc tính
…
65 xác định ID của phần tử hậu duệ hiện có tiêu điểm ảo. Trình xử lý sự kiện trên vùng chứa phải phản hồi các sự kiện phím và chuột bằng cách cập nhật giá trị của …
65 và đảm bảo rằng mục hiện tại được tạo kiểu phù hợp [ví dụ: có đường viền hoặc màu nền]Hướng dẫn chung
Sử dụng onkeydown để bẫy các sự kiện quan trọng, không phải onkeypress
IE sẽ không kích hoạt sự kiện
…
84 cho các khóa không phải chữ và số. Sử dụng …
85 thay thếĐảm bảo rằng bàn phím và chuột tạo ra trải nghiệm giống nhau
Để đảm bảo rằng trải nghiệm người dùng nhất quán bất kể thiết bị đầu vào, trình xử lý sự kiện bàn phím và chuột phải chia sẻ mã khi thích hợp. Ví dụ: mã cập nhật
…
7 hoặc kiểu dáng khi người dùng điều hướng bằng các phím mũi tên cũng nên được sử dụng bởi trình xử lý nhấp chuột để tạo ra các thay đổi tương tựĐảm bảo rằng bàn phím có thể được sử dụng để kích hoạt phần tử
Để đảm bảo rằng bàn phím có thể được sử dụng để kích hoạt các phần tử, bất kỳ trình xử lý nào được liên kết với sự kiện chuột cũng phải được liên kết với sự kiện bàn phím. Ví dụ: để đảm bảo rằng phím Enter sẽ kích hoạt một phần tử, nếu bạn có một
…
87, bạn cũng nên liên kết …
88 với sự kiện key down. …
89Luôn lấy tiêu điểm cho các mục và phần tử tabindex="-1" nhận tiêu điểm theo chương trình
IE sẽ không tự động vẽ đường viền tiêu điểm cho các mục nhận tiêu điểm theo chương trình. Chọn giữa việc thay đổi màu nền thông qua thứ gì đó như
…
90 hoặc thêm đường viền chấm thông qua …
91. Trong trường hợp đường viền chấm, bạn sẽ cần đảm bảo rằng các phần tử đó có đường viền 1px vô hình để bắt đầu, sao cho phần tử không phát triển khi kiểu đường viền được áp dụng [đường viền chiếm dung lượng và IE không triển khai các đường viền CSS Ngăn các sự kiện quan trọng đã sử dụng thực hiện các chức năng của trình duyệt
Nếu tiện ích của bạn xử lý một sự kiện quan trọng, hãy ngăn trình duyệt xử lý sự kiện đó [ví dụ: cuộn để phản hồi các phím mũi tên] bằng cách sử dụng mã trả về của trình xử lý sự kiện của bạn. Nếu trình xử lý sự kiện của bạn trả về
…
92, thì sự kiện đó sẽ không được lan truyền ra ngoài trình xử lý của bạnVí dụ
…
Nếu
…
93 trả về …
92, sự kiện sẽ được sử dụng, ngăn trình duyệt thực hiện bất kỳ hành động nào dựa trên tổ hợp phím