本文介绍如何利用 JavaScript 控制页面元素的 Tab 键遍历顺序，通过设置 tabindex 属性实现焦点管理。同时详细讲解如何通过监听键盘事件的 keyCode 结合 ctrlKey、altKey 等修饰键属性，实现 Ctrl+Enter、Alt+方向键等组合快捷键功能，并附带常见按键的 keyCode 对照表及浏览器兼容性注意事项。
快捷键与 tabindex 属性概述
快捷键在日常操作中应用广泛，例如常见的粘贴 Ctrl+V 和复制 Ctrl+C。使用快捷键能显著提升工作效率，尤其是当用户对特定操作熟练后，再次执行会变得更加便捷顺畅。对于重度依赖键盘的用户而言，键盘操作的效率往往优于鼠标。
利用 tabindex 控制焦点顺序
1）tabindex 属性： 该属性用于通过 Tab 键轻松控制页面中链接和表单元素的焦点顺序。 使用方法非常简单：obj.tabindex = tabindex;。根据 W3C 规范，tabindex 的取值范围从 0 到 32767。
JavaScript 实现组合快捷键监听
2) JavaScript 设置组合快捷键 核心原理是获取目标按键的 keyCode 值。若需结合 Ctrl、Alt 或 Shift 键，则需额外判断 ctrlKey、altKey 或 shiftKey 属性。关键在于确定具体按键的 keyCode 值。 (1) 设置 Ctrl + Enter 提交 if (e.ctrlKey && e.keyCode == 13){ return submit(); } (2) 设置 Alt+ 方向键 ← if (e.altKey&& e.keyCode == 37){ return submit(); } (3) 设置 Shift+F10 if (e.shiftKey&& e.keyCode == 37){ return submit(); } 4) 设置 Enter 提交 if (e.keyCode == 13){ return submit(); }
常见按键 keyCode 对照与兼容性
以下是一些常见按键的 keyCode 对照： keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 33 = Prior keycode 34 = Next keycode 35 = End keycode 36 = Home keycode 37 = Left keycode 38 = Up keycode 39 = Right keycode 40 = Down keycode 41 = Select keycode 42 = Print keycode 43 = Execute keycode 45 = Insert keycode 46 = Delete keycode 47 = Help 注意：需关注浏览器的兼容性问题。