Question

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

Answer 1

这看起来像chrome bug。也许你可以在crbug.com提交/投票。

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

将字段值设置为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)">

如果您不需要清除该值，请将该元素集中在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)">

在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)">

Answer 2

实现正确行为的一种更干净的方法是获取元素并在显示警报之前对其调用模糊方法，现在您不必删除事件侦听器。

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

//remove focus
inputField.blur();

//display your alert
alert("My Chrome browser doesn't get stuck anymore!");

onblur onfocus无限循环问题在铬

2 个答案: