jQuery 文本框失去焦點為空時強制聚焦：blur 事件與 setTimeout 技巧

問題

blur 事件中調用 focus() 無效，瀏覽器阻止在失去焦點時立即重新聚焦。

解決方案

$(function() {
    $("#tmpName").blur(checkExist).focus(); // 頁面載入聚焦
});

function checkExist() {
    var tmpName = $.trim($("#tmpName").val());
    if (tmpName.length === 0) {
        // 關鍵：setTimeout 延遲執行，跳出 blur 事件上下文
        setTimeout(function() {
            $("#tmpName").focus();
        }, 10);
    } else {
        // 業務邏輯
    }
}

原理解析

• blur 事件觸發時，瀏覽器正處於「焦點轉移」流程中，直接調用 focus() 會被忽略。
• setTimeout(fn, 10) 將 focus() 推入事件循環隊列，待當前調用棧清空後執行，繞過瀏覽器阻攔。
• 10ms 足夠短，用戶無感知；也可用 0 但 10 更穩妥。

完整最佳實踐

$(function() {
    var $input = $("#tmpName");
    $input.on("blur", function() {
        var val = $.trim($input.val());
        if (!val) {
            // 搖晃提示（可選）
            $input.addClass("shake");
            setTimeout(() => $input.removeClass("shake"), 500);
            // 延遲聚焦
            setTimeout(() => $input.focus(), 10);
        } else {
            doBusiness(val);
        }
    }).focus(); // 初始聚焦
});

總結

blur 中強制 focus() 需用 setTimeout 延遲執行。這是瀏覽器焦點管理機制決定的，非 jQuery Bug。配合視覺提示（搖晃/紅框）提升用戶體驗。