表单提交需同时响应Enter和按钮点击，须将输入控件置于合法form内、避免onsubmit阻止默认行为、统一调用handleSubmit；密码开关须用语义化button并支持空格键；搜索建议需实现方向键导航与Enter确认；响应式下避免input嵌套collapse导致焦点丢失。
表单提交要同时响应 Enter 和按钮点击
Bootstrap 表单默认只靠 type="submit" 按钮触发提交，但用户在 input 中按 Enter 却没反应，尤其在聊天、搜索、登录等场景下体验断裂。根本原因是浏览器只对 form 内的 submit 按钮自动绑定 Enter 行为，而输入框本身不参与——除非它位于一个合法的 form 容器中且没有其他阻断因素。
实操要点：
- 确保所有输入控件（
input、textarea）都包裹在同一个<form>标签内，不能只用div模拟表单结构 - 避免给
form设置onsubmit="return false"或event.preventDefault()后不手动调用逻辑，否则 Enter 会静默失败 - 若使用 JavaScript 控制提交（如防重复提交、校验），必须把核心逻辑抽成独立函数，例如
handleSubmit()，再分别绑定到form.addEventListener('submit', ...)和input.addEventListener('keydown', e => { if (e.key === 'Enter') handleSubmit() }) - 注意：多个
input时，仅最后一个可聚焦的文本类输入框（type="text"、type="search"等）默认响应 Enter；type="number"或type="email"在部分浏览器中可能不触发，建议统一监听
密码显示开关需支持空格键切换
Bootstrap 自带的密码可见性切换按钮（如带 <i class="fa-eye"> 的 button）通常只响应鼠标点击，但 WCAG 和键盘用户依赖空格键激活按钮——这是 HTML 原生 <button> 的标准行为，但容易被忽略。
常见错误是用 <div onclick="..."> 或 <span role="button"> 替代真实 button，导致空格无效。
正确做法：
- 切换控件必须是语义化
<button type="button">，不能是div或span - 确保该
button在 tab 顺序中可达（无tabindex="-1"，且未被disabled或display: none隐藏） - 不要在
onclick里直接写内联 JS，改用事件委托或addEventListener，便于后续维护和测试 - 如果用了自定义图标字体（如 Font Awesome），确保图标元素不拦截焦点，即不要给
i标签加tabindex或focus()
搜索建议列表必须实现 ArrowUp/ArrowDown/Enter 导航
Bootstrap 本身不接管输入框内的方向键行为，所以即使你用 dropdown-menu 渲染了建议列表，按 ↑ ↓ 也不会高亮选项——这是 autocomplete 最常被砍掉的功能点。
键盘导航不是“锦上添花”，而是可访问性和效率刚需。用户不会反复点鼠标选第 5 条建议，尤其在后台系统中。
关键实现逻辑：
- 维护一个
activeIndex变量（初始为 -1），监听input的keydown事件，捕获ArrowDown/ArrowUp - 每次更新前，用
document.querySelectorAll('.suggestion-item')获取当前可见项，防止索引越界 - 高亮时给对应
li加tabindex="-1"并调用.focus()，否则屏幕阅读器无法感知 -
Enter时插入当前activeIndex对应值，并触发blur()；Escape时清空高亮并blur() - 移动端慎用
click绑定建议项：iOS 下blur可能先于click触发，改用mousedown
响应式断点下键盘焦点容易丢失
在 @media (max-width: 768px) 下，很多开发者把搜索框塞进 navbar-toggler 折叠菜单里，结果用户展开菜单、聚焦输入框、按 Enter 提交——但焦点在折叠瞬间就丢了，提交逻辑失效。
这不是 JS bug，是 Bootstrap 的 collapse JS 在隐藏时会强制移除焦点（为符合 a11y 规范），但没考虑输入框正在交互。
解决方向很窄，但有效：
- 不要把
input放进.collapse容器内部；改为提至navbar顶层，用ms-auto或me-auto控制位置 - 若必须保留在折叠区，初始化 collapse 时监听
hide.bs.collapse事件，在event.target !== input.parentElement时才允许隐藏 - 所有响应式显隐操作必须作用于同一 DOM 节点，禁止复制多份
input+d-sm-none d-md-block——ID 重复会导致getElementById永远只操作第一个，键盘操作和 JS 绑定全部错位
最易被忽略的是：键盘操作有效性无法靠视觉判断。必须用 Tab 键从头走一遍流程，确认每个可交互元素都能获得焦点、响应空格/Enter、不跳过任何环节——尤其是折叠态下的搜索框和密码开关。自动化测试很难覆盖这些路径，得手动压测。
