onfocus和onblur配对使用: 焦点状态切换技巧

作者：技术拾光

时间：2026-06-17

就拿焦点状态来说吧，这问题看着不大，但真正踩过坑的人都清楚，一旦涉及的输入框变多，或者逻辑变得复杂起来，内联写法中那堆 onfocus 和 onblur 简直就是埋雷。说实话，真正能撑住场面的，还得是 addEventListener。 onfocus 和 onblur 这两个属性确实可以配对使用，

文章目录

就拿焦点状态来说吧，这问题看着不大，但真正踩过坑的人都清楚，一旦涉及的输入框变多，或者逻辑变得复杂起来，内联写法中那堆 onfocus 和 onblur 简直就是埋雷。说实话，真正能撑住场面的，还得是 addEventListener。

onfocus和onblur配对使用: 焦点状态切换技巧

onfocus 和 onblur 这两个属性确实可以配对使用，但问题在于直接写死在 HTML 里很容易失控。一旦涉及响应式状态、条件逻辑，或者需要处理多个输入框，addEventListener 才是更稳妥的选择。

onfocus/onblur 属性只适合最简场景

什么叫最简场景？比如只有一个输入框，没有状态依赖，不涉及校验，也不需要样式联动。那你可以快速写成这样：

但这种写法很快就会暴露问题：

你根本分不清用户是“清空后失焦”，还是“从未输入就离开”，结果提示文案动不动就误恢复。
想监听 Enter 提交或者 Tab 切换时的焦点流转细节？没门。
多个输入框共用同一段内联脚本，维护成本直线上升，出错了都找不到源头。
跟 React、Vue 这类框架的状态同步更是麻烦，this.value 很可能被框架劫持，直接失效。

用 addEventListener 实现可维护的焦点状态切换

真正可控的做法是绑定事件监听器，同时配合一个明确的状态变量（比如 isFocused）或者 class 来控制行为。这样做的好处是逻辑清晰，好维护。

用 input.addEventListener('focus', ...) 捕获聚焦，更新状态或样式。
用 input.addEventListener('blur', ...) 捕获失焦，触发校验或还原默认值。
有个细节要留心：如果你想监听子元素失焦的委托（比如表单容器统一处理），必须用 focusout，因为 blur 不冒泡。
禁用状态下的输入框压根不会触发任何焦点事件，省了你再写 if 判断的功夫。

下面这个例子展示的是如何清空提示文本，并避免重复恢复：

const input = document.querySelector('input');
let hasUserInput = false;

input.addEventListener('focus', () => {
  if (input.value === '请输入邮箱') {
    input.value = '';
    input.classList.add('active');
  }
});

input.addEventListener('blur', () => {
  if (!input.value && !hasUserInput) {
    input.value = '请输入邮箱';
    input.classList.remove('active');
  }
});

input.addEventListener('input', () => {
  hasUserInput = true;
});