jquery失去焦点事件

jQuery 失去焦点事件

在 jQuery 中，失去焦点事件通常通过 blur() 方法或 .on('blur', handler) 绑定。当元素失去焦点时（例如用户点击其他区域或按 Tab 键切换），会触发该事件。

基本语法

使用 blur() 方法绑定事件：

$("#inputField").blur(function() {
    // 失去焦点时执行的逻辑
    console.log("输入框失去焦点");
});

使用 .on() 方法绑定事件：

$("#inputField").on("blur", function() {
    // 失去焦点时执行的逻辑
    alert("输入框已失去焦点");
});

动态绑定事件

对于动态生成的元素（如通过 AJAX 加载的内容），需使用事件委托：

$(document).on("blur", ".dynamic-input", function() {
    console.log("动态生成的输入框失去焦点");
});

触发失去焦点事件

手动触发 blur 事件：

$("#inputField").blur(); // 直接触发
$("#inputField").trigger("blur"); // 通过 trigger 触发

实际应用示例

验证输入框内容是否为空：

$("#email").blur(function() {
    if ($(this).val() === "") {
        $(this).css("border", "1px solid red");
        $("#error-message").text("邮箱不能为空");
    } else {
        $(this).css("border", "1px solid #ccc");
        $("#error-message").text("");
    }
});

注意事项

• blur 事件不会冒泡到父元素，若需冒泡行为，可使用 focusout 事件。
• 移动端设备中，blur 事件可能因键盘收起或触摸行为延迟触发。