You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为输入框添加失去焦点的EventListener?

如何监听输入框失去焦点(用户离开输入框)

你需要使用blur事件来监听输入框失去焦点的动作,这就是你要找的触发时机。

直接修改你的代码,将处理恢复placeholder的y函数绑定到blur事件即可:

let element = document.getElementById("username");
const x = () => {
  element.setAttribute("placeholder", " ");
}

element.addEventListener("click", x);
// 绑定blur事件,监听输入框失去焦点
element.addEventListener("blur", y);

const y = () => {
  if(element.value === ""){
    element.setAttribute("placeholder", "USERNAME");
  }
}

额外优化建议:

  • 推荐用focus事件替代click事件,因为focus能覆盖所有输入框获得焦点的场景(比如通过Tab键切换到输入框),而click仅在鼠标点击时触发,适用性更广:
    element.addEventListener("focus", x);
    

内容的提问来源于stack exchange,提问作者IsoW

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 17:39:40