谷歌 onblur onfocus无限循环问题

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (51)

javascript函数用于验证在OnBlur事件中调用的数字。如果该值无效,它将提示弹出窗口并将焦点返回到该字段。

示例代码:

<!DOCTYPE html>
<html>
<body>

Enter your number: <input type="text" id="fname" onfocus="this.select()" onblur="myFunction(this)">

<script>
function myFunction(field) {
    if( isNaN(field.value)){
    alert('wrong !!!');
    field.focus();
    return false;
    }
}
</script>

</body>
</html>

验证在Internet Explorer 11(版本11.447.14393.0)/ Windows 10中正常工作。

但是在单击确定或关闭警报按钮后的chrome中,焦点不会返回到字段。警报再次弹出。因此,每次确定/关闭点击时,警报会不断弹出。

chrome版本是63.0.3239.132

提问于
用户回答回答于

实现正确行为的一种更简洁的方法是在显示警报之前获取元素并在其上调用blur方法,现在您不必删除事件侦听器。

var inputField = document.getElementById("theIdForTheInputField");

//remove focus
inputField.blur();

//display your alert
alert("My Chrome browser doesn't get stuck anymore!");
用户回答回答于

这看起来像一个铬虫。也许你可以在crbug.com上提交/ upvote它。

您可以通过一些解决方法来实现您的需求。

  1. 将字段值设置为empty value

function myFunction(field)
{
    if(isNaN(field.value))
    {
        alert('wrong !!!');
        field.value="";
        field.focus();
        return false;
    }
}

Enter your number: <input type="text" id="fname1" onfocus="this.select()" onblur="myFunction(this)">

  1. 如果您不需要清除该值,请将该元素集中在一个setTimeout

function myFunction(field)
{
    if(isNaN(field.value))
    {
        alert('wrong !!!');
        setTimeout(function(){
            field.focus();
        },0);
        return false;
    }
}

Enter your number: <input type="text" id="fname1" onfocus="this.select()" onblur="myFunction(this)">

  1. alert完成后删除和添加onblur事件。

function myFunction(field)
{
    if(isNaN(field.value))
    {
        alert('wrong !!!');
        var onblurevent=field.onblur;
        field.onblur = "";
        setTimeout(function(){
            field.focus();
            field.onblur=onblurevent;
        },0);
        return false;
    }
}

Enter your number: <input type="text" id="fname1" onfocus="this.select()" onblur="myFunction(this)">

扫码关注云+社区

领取腾讯云代金券