js监听input失去焦点

基础概念

在JavaScript中，监听input元素失去焦点的事件通常使用blur事件。当用户从一个输入框或其他可聚焦的元素（如按钮）移开焦点时，就会触发这个事件。

类型与应用场景

类型：这是一个DOM事件，适用于所有支持JavaScript的浏览器。
应用场景：
- 表单验证：在用户离开输入框时检查输入是否有效。
- 自动保存草稿：用户在编辑内容时，失去焦点可以触发自动保存功能。
- 输入格式化：例如，自动将电话号码格式化为标准格式。

示例代码

以下是一个简单的例子，展示了如何在JavaScript中使用blur事件来验证一个输入框中的电子邮件地址：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Blur Event Example</title>
<script>
function validateEmail(input) {
    var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (!pattern.test(input.value)) {
        alert("请输入有效的电子邮件地址！");
        input.focus();
    }
}
</script>
</head>
<body>

<input type="text" id="email" placeholder="请输入电子邮件地址" onblur="validateEmail(this)">

</body>
</html>

在这个例子中，当用户离开电子邮件输入框时，validateEmail函数会被调用。如果输入的不是有效的电子邮件地址，就会弹出一个警告框，并且焦点会返回到输入框，以便用户可以立即更正。