javascript - Chrome 中的 onblur onfocus 无限循环问题

标签 javascript html google-chrome onblur onfocus

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 中点击 ok 或关闭 alert 按钮后,焦点不会返回到字段。再次弹出警报。因此,每次单击“确定”/“关闭”时,警报都会不断弹出。

chrome 版本是 63.0.3239.132

最佳答案

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

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

  1. 将字段值设置为空值

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

关于javascript - Chrome 中的 onblur onfocus 无限循环问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48536618/

相关文章:

javascript - 删除未选中的 radio 类别

javascript - d3 条形图 y 轴刻度线和高于最大值的网格线

javascript - 我们如何使用 javascript 或 jquery 获取由 chrome 计算的元素的高度和宽度?

css - 最大宽度突然停止在谷歌浏览器中工作

python - 在 Python 中监控使用 Internet Explorer、Opera、Chrome、Firefox 和 Safari 访问的网站

javascript - 从 JavaScript 中的第二个变量获取指定变量的值

javascript - webpack 4 给出背景 : url([object Module]) as bg image

javascript - jQuery:让一个元素充当另一个元素的事件代理

javascript - Angular.js getElementById() 在 $scope 函数中不起作用

html - 将 Div 高度固定为页面高度的百分比