HTML焦点切换对CSS是否存在间隙？联动输入框显示异常咨询

你观察到的现象确实和焦点切换的短暂间隙有关，但更核心的是CSS选择器的逻辑漏洞导致条件输入框无法正常获得焦点。

当你从主输入框切换焦点到条件输入框时，浏览器的焦点流转顺序是：

1. 主输入框失去焦点，触发blur事件，此时它的:focus状态消失，input.main:focus~input.conditional规则立即失效，条件输入框被设置为display: none。
2. 由于条件输入框已经被隐藏，浏览器无法将焦点设置到它上面，所以它的:focus状态永远不会触发，自然无法通过input.conditional:focus规则重新显示。

这里的“间隙”确实存在——主输入框失焦后，条件输入框还未获得焦点的瞬间，但本质问题是隐藏元素无法接收焦点，导致后续的焦点切换直接中断。

方案1：使用:focus-within（推荐纯CSS方案） #

:focus-within是CSS伪类，只要容器内的任意元素获得焦点，容器就会匹配该伪类。把两个输入框放到同一个容器中，就能轻松实现“组内有焦点就显示条件输入框”的需求。

代码示例： #

<div class="input-group">
  <input type="text" class="main" placeholder="main">
  <input type="text" class="conditional" placeholder="conditional">
</div>

/* 默认隐藏条件输入框 */
.input-group .conditional {
  display: none;
}

/* 容器内有元素聚焦时，显示条件输入框 */
.input-group:focus-within .conditional {
  display: block;
}

方案2：JavaScript辅助控制 #

通过监听焦点事件，利用blur事件的relatedTarget属性判断焦点是否在输入框组内，手动控制条件输入框的显示状态。

代码示例： #

<input type="text" class="main" placeholder="main">
<input type="text" class="conditional" placeholder="conditional">

input.conditional {
  display: none;
}

input.conditional.show {
  display: block;
}

const mainInput = document.querySelector('.main');
const conditionalInput = document.querySelector('.conditional');

// 主输入框聚焦时，显示条件输入框
mainInput.addEventListener('focus', () => {
  conditionalInput.classList.add('show');
});

// 主输入框失焦时，判断焦点是否切换到条件输入框，不是则隐藏
mainInput.addEventListener('blur', (e) => {
  if (e.relatedTarget !== conditionalInput) {
    conditionalInput.classList.remove('show');
  }
});

// 条件输入框失焦时，判断焦点是否切换到主输入框，不是则隐藏
conditionalInput.addEventListener('blur', (e) => {
  if (e.relatedTarget !== mainInput) {
    conditionalInput.classList.remove('show');
  }
});

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