如何为键盘聚焦的input输入框设置与鼠标聚焦不同的样式

方案1：JS实现（推荐，判断精准无副作用） #

核心思路：通过监听交互事件区分触发源，给聚焦的input挂载不同的类控制样式。

// 记录当前交互类型
let interactionType = null;

// 监听鼠标按下事件，标记为鼠标交互
document.addEventListener('mousedown', () => {
  interactionType = 'mouse';
  // 100ms后重置状态，避免影响后续键盘操作
  setTimeout(() => interactionType = null, 100);
});

// 监听键盘按下事件，标记为键盘交互
document.addEventListener('keydown', (e) => {
  // 仅识别Tab等导航键的操作，排除输入类按键
  if (['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
    interactionType = 'keyboard';
  }
});

// 监听所有input的聚焦事件
document.addEventListener('focus', (e) => {
  if (e.target.tagName !== 'INPUT') return;
  // 先清空之前的聚焦类
  e.target.classList.remove('focus-by-mouse', 'focus-by-keyboard');
  // 根据交互类型加对应类
  if (interactionType === 'mouse') {
    e.target.classList.add('focus-by-mouse');
  } else if (interactionType === 'keyboard') {
    e.target.classList.add('focus-by-keyboard');
  }
}, true); // 用捕获模式保证优先触发

/* 鼠标聚焦样式 */
input.focus-by-mouse:focus {
  outline: none;
  border: 1px solid #d9d9d9;
}

/* 键盘聚焦样式 */
input.focus-by-keyboard:focus {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
  border: 1px solid #1677ff;
}

该方案兼容所有主流浏览器，判断逻辑准确，可适配所有类型的input元素，无场景限制。

方案2：纯CSS实现（轻量无JS，适合简单场景） #

核心思路：利用点击交互时父元素会触发:active伪类的特性，覆盖鼠标点击时的聚焦样式。

<div class="input-wrap">
  <input type="text" placeholder="请输入内容">
</div>

.input-wrap {
  display: inline-block;
}

/* 键盘聚焦默认样式 */
input:focus {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
  border: 1px solid #1677ff;
}

/* 鼠标点击时覆盖为鼠标聚焦样式 */
.input-wrap:active input:focus {
  outline: none;
  border: 1px solid #d9d9d9;
}

注意事项：需要保证input完全被父容器包裹，无超出或者内边距空隙；如果需要点击容器空白区域也能聚焦input，把外层div换成label标签关联input即可。该方案缺点是存在极小概率的样式匹配偏差，适合对交互要求不高的简单场景。

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