如何在输入框失去焦点时执行自定义函数？

有两种简洁的实现方式，可根据场景选择：

1. 内联onblur属性（最快最简） #

直接在输入框标签中通过onblur属性绑定自定义函数，代码量最少：

<input type="text" onblur="myCustomFunction()">

<script>
function myCustomFunction() {
  // 编写你的自定义逻辑
  console.log('输入框已失去焦点');
}
</script>

2. JavaScript事件监听（更符合代码分离原则） #

如果希望HTML与JavaScript代码分离，使用addEventListener监听blur事件：

<input type="text" id="targetInput">

<script>
// 获取输入框元素
const inputElement = document.getElementById('targetInput');

// 绑定失焦事件，直接使用匿名函数
inputElement.addEventListener('blur', () => {
  console.log('输入框已失去焦点');
  // 自定义逻辑写在这里
});

// 也可以绑定已定义的函数
function myCustomFunction() {
  // 自定义逻辑
}
inputElement.addEventListener('blur', myCustomFunction);
</script>

两种方式都能满足需求：第一种适合快速原型或简单场景；第二种更利于代码维护，是复杂项目的推荐写法。

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