Vue表单点击输入框无法获取焦点，Tab键可正常切换求助

常见排查与修复步骤 #

• 检查元素遮挡情况：
  大概率是有透明元素（如空div、弹窗遮罩）或固定定位组件覆盖在输入框上方，导致鼠标点击实际触发的是上层元素。打开浏览器开发者工具（F12），用元素选择器点击输入框，在元素面板里查看输入框是否被其他元素覆盖。如果有，调整上层元素的z-index值，或者修改其定位范围避开输入区域。

• 排查事件阻止逻辑：
  全局或局部的click、mousedown事件监听可能调用了event.preventDefault()或event.stopPropagation()，直接阻止了输入框的默认获焦行为。在开发者工具的「事件监听器」面板，筛选输入框及其父元素的相关事件，找到并移除或修改阻止默认行为的代码。

• 测试Vue相关逻辑冲突：
  临时移除v-model、autofocus属性，或者注释掉表单的@submit.prevent事件，测试输入框是否能正常获焦。如果恢复正常，再逐步添加这些属性，定位到具体冲突的逻辑块。另外，检查是否有自定义指令或第三方UI库的逻辑干扰了输入框交互。

• 清除浏览器缓存或测试环境：
  浏览器渲染缓存可能引发异常，尝试强制刷新页面（Ctrl+F5），或者用隐身模式打开页面测试。同时查看浏览器控制台是否有JS报错，报错可能中断了表单相关的正常逻辑。

• 检查CSS属性干扰：
  确认输入框及其父元素没有设置pointer-events: none——这个属性会直接禁用鼠标交互。另外，user-select: none一般不影响获焦，但也可以临时移除测试是否有影响。

针对你的代码的快速测试方案 #

先简化代码到最基础状态，验证核心功能：

<form>
  <label for="name">Namn</label>
  <input type="text" id="name">
</form>

如果简化后输入框能正常获焦，再逐步添加v-model、class、autofocus等属性，逐个排查引发问题的代码。

内容的提问来源于stack exchange，提问作者Anders Kleimark