onfocus attribute和onblur配对使用_焦点状态切换技巧方法

作者：袖梨 2026-06-27

推荐用 addEventListener 替代 onfocus/onblur 内联属性，因其支持状态管理、条件逻辑、多输入框维护及框架集成；内联写法仅适用于无状态单输入框场景。

onfocus 和 onblur 属性可以配对使用，但直接写在 HTML 里容易失控——尤其是需要响应式状态、条件逻辑或多个输入框时，推荐用 addEventListener 替代。

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

比如单个输入框、无状态依赖、不涉及校验或样式联动时，可快速写成：

<input type="text" value="请输入邮箱" onfocus="this.value=''" onblur="if(!this.value) this.value='请输入邮箱'">

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

无法区分“用户清空后失焦”和“从未输入就离开”，导致提示文案误恢复
不能监听 Enter 提交或 Tab 切换时的焦点流转细节
多个输入框共用同一段内联脚本，维护成本高、易出错
无法与 React/Vue 等框架的状态同步，this.value 可能被框架劫持失效

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

真正可控的做法是绑定事件监听器，并配合一个明确的状态变量（如 isFocused）或 class 控制行为：

用 input.addEventListener('focus', ...) 捕获聚焦，更新状态或样式
用 input.addEventListener('blur', ...) 捕获失焦，触发校验或还原默认值
注意：如果要监听子元素失焦委托（比如表单容器统一处理），必须用 focusout，因为 blur 不冒泡
禁用状态（disabled）下不会触发任何焦点事件，无需额外判断

示例中清空提示文本并避免重复恢复：

const input = document.querySelector('input');<br>let hasUserInput = false;<br><br>input.addEventListener('focus', () => {<br>  if (input.value === '请输入邮箱') {<br>    input.value = '';<br>    input.classList.add('active');<br>  }<br>});<br><br>input.addEventListener('blur', () => {<br>  if (!input.value && !hasUserInput) {<br>    input.value = '请输入邮箱';<br>    input.classList.remove('active');<br>  }<br>});<br><br>input.addEventListener('input', () => {<br>  hasUserInput = true;<br>});