onblur onfocus chrome中的无限循环问题

yiytaume 于 2022-12-06 发布在 Go

关注(0)|答案(4)|浏览(514)

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

google-chrome

来源：https://stackoverflow.com/questions/48536618/onblur-onfocus-infinite-loop-issue-in-chrome

4条答案

按热度按时间

xoshrz7s1#

这看起来像chrome bug。也许你可以在crbug.com提交/投票。
您的需求可以通过一些变通方法来实现。
1.将字段值设置为empty value。
第一个
1.如果不需要清除该值，则将元素聚焦在setTimeout中。
第一次
1.在alert完成后删除和添加onblur事件。
第一个

赞(0）回复(0）举报 2022-12-06

klr1opcd2#

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

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

//remove focus
inputField.blur();

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

赞(0）回复(0）举报 2022-12-06

hfyxw5xn3#

最好的解决方案是删除onblur事件，然后通过设置setTimeout函数将其添加回来。

<script>
function myFunction(field) {
    if( isNaN(field.value)){
    alert('wrong !!!');
    $("#fname").attr("onBlur","");
    field.focus();
     setTimeout(function(){
                    $("#fname").attr("onBlur","myFunction(this)");
                },100);
    return false;
    }
}
</script>

赞(0）回复(0）举报 2022-12-06

luaexgnf4#

我正在寻找一个类似问题的答案，发现Chrome知道这个bug，目前已经将其归档为WontFix（https://bugs.chromium.org/p/chromium/issues/detail?id=666205）。
对于Vignesh Raja已经发布的问题，另一个解决方案是添加一个if (document.activeElement == document.body)。显然，由于Chrome bug是一个关于警报如何管理其自身模糊功能的问题，这个检查允许回避这个问题。我还没有在其他浏览器中尝试过这个，所以对此的任何评论都是感谢的。
对于未来的读者来说，原始代码看起来像这样：

<!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)){
        if (document.activeElement == document.body) {
            alert('wrong !!!');
            field.focus();
            return false;
        }
    }
}
</script>

</body>
</html>

赞(0）回复(0）举报 2022-12-06

我来回答

onblur onfocus chrome中的无限循环问题

4条答案

相关问题

热门标签

最新问答