字段焦点不能在firefox中工作，setTimeout（function（）{id.focus（）;}，0）;

Question

由于我的应用程序在Firefox上运行，并且我有问题专注于Firefox中的字段我在这里阅读了很多问题 （堆栈溢出）我在下面的代码中看到以解决此问题的所有答案：

function onloadFocus(){
    setTimeout(function() {
        document.getElementById('name').focus()
    },0);
}

但是当你运行我必须在我的应用程序中实现的代码时， 注意：这不是纯代码，它是一个演示。 请阅读代码中写的注释。

<!DOCTYPE html>
<html>
<body>
<head>
<script >
function abc(id,spanId){
var testVar = document.getElementById(id);
var spanVar = document.getElementById(spanId);

if(id.value =='') {
spanId.innerHTML = 'value is required';
//setTimeout(function(){id.focus();},0); //first close this line of code and execute it.
id.focus(); // then close this line and open comment of above line run it
return false;
}

}
</script>
</head>

<form>
<lable>Enter 1st value</lable><input type="text" onblur="abc(this,test_s1)"/>
<span id="test_s1"></span>
<lable>Enter 2nd value</lable><input type="text" onblur="abc(this,test_s2)"/>
<span id="test_s2"></span>
</form>
</body>
</html>

当你用id.focus();执行代码时id.focus(); 它的工作正常（在Firefox中有一段时间，但在所有其他浏览器中运行良好，例如：chrome），但是当你使用setTimeout(function(){id.focus();},0);运行代码时setTimeout(function(){id.focus();},0); 你会看到无限循环的焦点将从两个文本字段开始。 我该如何解决这种情况？ 请在两个浏览器FIREFOX和CHROME中查看上面的代码。 如果您不理解我的问题，请告诉我。

Answer 1

使用setTimeout，您将导致循环，从而下一个浏览器在第一个上运行setTimeout函数之前聚焦第二个输入。 这导致另一个非聚焦事件，因为第一个输入由setTimeout聚焦，这会触发另一个非聚焦，从而触发另一个非聚焦.....

通过单击页面主体而不是下一个输入，您可以看到setTimeout实际上正常工作。

你可以通过在全局变量中存储一个标志来解决这个问题，该变量表明最近是否发生了非焦点事件，并在将焦点应用于setTimeout中的输入之前进行检查。

<script>
var unfocusJustHappened = false;

function abc(id,spanId){
    var testVar = document.getElementById(id);
    var spanVar = document.getElementById(spanId);

    if(id.value =='') {
        spanId.innerHTML = 'value is required';

        // Update flag
        unfocusJustHappened = true;

        setTimeout(function(){

            // If the flag is true
            if (unfocusJustHappened) {
                id.focus();
            }
        },0);

        setTimeout(function(){

            // After a short period reset the flag to false
            unfocusJustHappened = false;
        },30)

        return false;
    }

}
</script>