Question

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

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();执行代码时它工作正常（在Firefox中有一段时间，但在所有其他浏览器中运行良好，例如：chrome），但当你使用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>

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

1 个答案: