如何在点击其他位置时移除TextInputField的:focus状态

问题根因 #

绝大多数情况下该问题由以下两种原因导致：

• 高亮逻辑绑定了设置了tabindex属性的父容器的:focus状态，点击外部时焦点仍停留在父容器上
• 点击外部区域/确定按钮时，未主动触发输入框失焦

修复方案 #

方案1：移除父容器多余tabindex属性 #

如果父容器手动设置了tabindex="0"/tabindex="1"等属性，直接删除该属性即可，让焦点默认绑定在输入框本身，点击外部时输入框会自动失焦，高亮效果同步消失。

方案2：修正CSS聚焦绑定逻辑 #

如果需要保留父容器的高亮逻辑，调整CSS选择器，绑定输入框聚焦时的父容器状态：

/* 错误写法：直接绑定父容器的focus状态 */
.input-container:focus {
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
  border-color: #1677ff;
}

/* 正确写法：输入框聚焦时父容器才显示高亮 */
/* 兼容现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+） */
.input-container:has(.text-input-field:focus) {
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
  border-color: #1677ff;
}

低版本浏览器不支持:has选择器时，可以通过JS监听输入框的focus/blur事件，动态给父容器添加/移除高亮类名实现。

方案3：监听外部点击主动失焦 #

绑定全局点击事件，判断点击区域不在输入框容器范围内时，主动触发输入框失焦：

const inputField = document.querySelector('.text-input-field')
const inputContainer = document.querySelector('.input-container')

document.addEventListener('click', (e) => {
  if (!inputContainer.contains(e.target)) {
    inputField.blur()
  }
})

方案4：确定按钮点击时主动失焦 #

在确定按钮的点击回调中，主动调用输入框的blur方法：

const confirmBtn = document.querySelector('.confirm-btn')
confirmBtn.addEventListener('click', () => {
  inputField.blur()
  // 原有确定按钮业务逻辑
})

框架场景适配 #

• React：通过useRef获取输入框DOM实例，直接调用ref.current.blur()即可
• Vue：通过ref属性获取输入框实例，调用ref.value.$el.blur()即可

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