### Vue3 中 Tab 键导航时按钮不被选中的解决方案 在 Vue3 应用程序中处理表单元素之间的焦点移动是一个常见的需求。当按下 `Tab` 键时，默认行为会按照文档流顺序聚焦下一个可交互元素，这通常包括按钮。然而有时希望阻止按钮获得焦点。 为了实现这一功能，可以采用以下方法： #### 方法一：通过 CSS 控制按钮的视觉效果 可以通过设置特定类来控制按钮在获取焦点时的表现形式，使其看起来像是未被选中一样[^1]。 ```css button.no-focus:focus { outline: none; } ``` 将此样式应用到不想让用户感知其已被聚焦的按钮上即可达到目的。 #### 方法二：JavaScript 阻止默认事件传播 另一种更彻底的方式是在按键监听器内部捕获 `keydown` 或者 `focusin` 事件并调用 `event.preventDefault()` 来防止浏览器执行默认操作——即给定目标元素赋予键盘焦点[^2]。 ```javascript document.addEventListener('keydown', function(event){ if (event.key === 'Tab') { const focusedElement = document.activeElement; // 获取当前有焦点的对象 setTimeout(() => { let nextFocusableEl; if(focusedElement.tagName.toLowerCase() !== "input"){ return false; } var focusableElementsString = 'a[href], area[href], input:not([type="hidden"]), select, textarea, button, iframe, object, embed, *[tabindex]'; var allFocusableEls = Array.from(document.querySelectorAll(focusableElementsString)); var currentIndex = allFocusableEls.indexOf(focusedElement); nextFocusableEl = allFocusableEls[currentIndex + 1]; while(nextFocusableEl && nextFocusableEl.tagName.toLowerCase()==='button'){ currentIndex++; nextFocusableEl=allFocusableEls[currentIndex+1]; } event.preventDefault(); if(!nextFocusableEl){ return true; }else{ nextFocusableEl.focus(); } },0); } }); ``` 这段脚本会在检测到 `Tab` 按下之后立即寻找下一个应该接收焦点而非按钮类型的 DOM 节点，并强制将其设为新的活动对象；同时取消了原本即将发生的自然流转过程。 以上两种策略可以根据实际项目的需求灵活选用或组合使用以满足最佳用户体验的要求。