CSS :focus实现输入框建议框 点击a标签前消失如何解决

纯CSS通过input:focus控制联想下拉面板显示的逻辑存在固有缺陷：鼠标按下下拉选项的瞬间，输入框会先触发失焦，:focus选择器立即失效，面板提前隐藏，选项的点击事件根本无法正常触发。

• 方案1：纯CSS实现（无JS，现代浏览器优先选）
  使用:focus-within伪类替换原有的:focus选择器，该伪类会在元素自身或其任意子元素处于聚焦状态时匹配规则，只要外层容器内有元素（输入框、下拉链接）聚焦，面板就保持显示。
  仅需修改1处CSS即可：

/* 删掉原来的 input:focus ~ .suggest 规则，替换为下方规则 */
.wrapper:focus-within .suggest {
  display: block;
}

• 该方案兼容所有主流现代浏览器，无需额外写JS逻辑，改完即可正常点击下拉选项。

• 方案2：阻止默认失焦行为（最少JS代码）
  如果需要兼容不支持:focus-within的老旧浏览器，仅需加少量JS逻辑：监听下拉面板的mousedown事件并阻止默认行为，这样点击面板内容时不会触发输入框失焦，原有CSS逻辑完全不用改动。

// 监听下拉面板的鼠标按下事件
document.querySelector('.suggest').addEventListener('mousedown', e => {
  e.preventDefault()
})

• 原理：浏览器默认会在mousedown触发时把焦点从输入框转移到点击目标，阻止该默认行为后，点击选项时输入框始终保持聚焦，面板不会提前隐藏。

• 方案3：延迟隐藏兼容逻辑
  如果需要更稳妥的兼容，也可以通过延迟面板隐藏的方式，给选项点击留出足够的触发时间：

const input = document.querySelector('input')
const suggestPanel = document.querySelector('.suggest')
let hideTimer = null

input.addEventListener('focus', () => {
  clearTimeout(hideTimer)
  suggestPanel.style.display = 'block'
})

input.addEventListener('blur', () => {
  // 延迟200ms隐藏，足够触发选项点击
  hideTimer = setTimeout(() => {
    suggestPanel.style.display = 'none'
  }, 200)
})

// 鼠标在面板上按下时清除隐藏定时器
suggestPanel.addEventListener('mousedown', () => {
  clearTimeout(hideTimer)
})

CSS #

.wrapper {
  position: relative;
}

.suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #ccc;
  display: none;
}

.item {
  color: black;
  display: block;
}

input:focus ~ .suggest {
  display: block;
}

HTML #

<div class="wrapper">
  <input type="text">
  <div class="suggest">
    <a href="#" class="item">联想选项1</a>
    <a href="#" class="item">联想选项2</a>
  </div>
</div>

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