Javascript - 在警報消息后設置焦點

Question

當驗證失敗時，我試圖專注於相同的元素。 這是我的 HTML 代碼：

<input id="potatoes" name="potatoes" value="" type="text" class="tooltip" onblur="Validate('potatoes')" autocomplete='off'>

這是我的 javascript 代碼：

function Validate(id) {
var errors = {
    potatoes : 'enter potatoes',
    hamburgers : 'enter'
};
if (document.getElementById(id).value === '') {
    if (id in errors) {
        alert(errors[id]);
         //setTimeout(function(){document.getElementById(id).focus();}, 1);
    }
} 

}

我嘗試使用 .focus() 方法設置焦點，但它不起作用。 我讀過它可能取決於 HTML 中的“onblur”，當我調用我的函數 Validate() 時，所以我試圖改變它，但到目前為止沒有任何效果。

Answer 1

這里有問題。 這段代碼正在循環中。 觸發“焦點”后，將再次調用Validate函數，顯示另一個警報對話框。

那是工作代碼

的HTML

<input id="potatoes" name="potatoes" value="" type="text" class="tooltip" onblur="Validate(this)" autocomplete='off'>

Java腳本

var validating = false; //<-- IMPORTANT
function Validate(element) {
var id = element.id;

var errors = {
    potatoes : 'enter potatoes',
    hamburgers : 'enter'
};
if (document.getElementById(id).value === '') {
    if (id in errors) {
            if(validating == false) {
                    validating = true
            alert(errors[id]);
            setTimeout(function(){
                document.getElementById(id).focus();
                validating = false;
            }, 1);
            }
    }
}
} 

在html中，我正在傳遞此代碼 ，這樣做是在傳遞元素，在Validate函數中，您可以訪問ID，而只需調用

var id = element.id;

對於焦點問題（由循環問題引起），您可以看到我正在使用驗證變量來知道何時驗證何時不是。 這讓Validate函數避免循環。 所以：

1）在Validate函數之外定義一個驗證變量，並將其設置為false。

2）僅在驗證為假時才觸發 焦點並發出警報 ，然后將其設置為true

Answer 2

javascript函數alert(string)是同步的。 用戶對警報消息作出反應時，腳本將暫停。 不需要做一些特別的事情。 以下代碼段應該起作用：

alert(errors[id]);
document.getElementById(id).focus();

用戶提交警報消息后，元素立即獲得焦點。

Answer 3

你可以像這樣使用 jQuery：

setTimeout(function() {$('#yourInputId').focus();},1);