Javascript 字段焦点在firefox中不工作,setTimeout(函数(){id.focus();},0);

Javascript 字段焦点在firefox中不工作,setTimeout(函数(){id.focus();},0);,javascript,html,google-chrome,firefox,focus,Javascript,Html,Google Chrome,Firefox,Focus,当我的应用程序在Firefox上运行时,我发现Firefox中的字段存在问题,所以我读了很多文章 下面是我在所有答案中看到的解决此问题的代码(堆栈溢出): function onloadFocus(){ setTimeout(function() { document.getElementById('name').focus() },0); } 但是当您运行下面的代码时,我必须在我的应用程序中实现这些代码,注意:这不是纯代码,它是一个演示。 请阅读代码中的注释

当我的应用程序在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>

功能abc(id,spanId){
var testVar=document.getElementById(id);
var spanVar=document.getElementById(spanId);
如果(id.value=''){
spanId.innerHTML='值是必需的';
//setTimeout(function(){id.focus();},0);//首先关闭这行代码并执行它。
id.focus();//然后关闭此行并打开上面行的注释运行它
返回false;
}
}
输入第一个值
输入第二个值
当您使用
id.focus()执行代码时工作正常(在firefox中有一段时间,但在所有其他浏览器中工作良好,例如:chrome),但是当您使用
setTimeout(function(){id.focus();},0)运行代码时您将看到在两个文本字段上都将开始一个无限的焦点循环。我怎样才能解决这个问题??
请在FIREFOX和CHROME浏览器中检查以上代码。

如果您不理解我的问题,请让我知道。

使用setTimeout,您正在导致一个循环,即下一个浏览器在setTimeout函数对第一个浏览器运行之前聚焦第二个输入。这会导致另一个unfocus事件,因为第一个输入被setTimeout聚焦,这会触发另一个unfocus,这会触发另一个unfocus

您可以看到setTimeout实际上很好地完成了它的工作,通过单击页面主体,而不是单击下一个输入

您可以通过在全局变量中存储一个标志来解决这个问题,该标志说明最近是否发生了unfocus事件,并在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>

var unfocusjustconcerd=false;
功能abc(id,spanId){
var testVar=document.getElementById(id);
var spanVar=document.getElementById(spanId);
如果(id.value=''){
spanId.innerHTML='值是必需的';
//更新标志
unfocusjustconcept=true;
setTimeout(函数(){
//如果该标志为真
如果(未聚焦已发生){
id.focus();
}
},0);
setTimeout(函数(){
//短时间后,将标志重置为false
unfocusjustconcerd=false;
},30)
返回false;
}
}