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