onblur onfocus infinite loop issue in chrome

Asked 31/1, 2018 at 7:20 Answered 27/9, 2022 at 18:42

javascript html google-chrome onblur onfocus

A javascript function is used to validate the number is called in OnBlur event. if the value is not valid it will alert a pop up and return the focus to the field.

The sample code:

<!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>

validation works fine in Internet Explorer 11(version 11.447.14393.0)/ Windows 10.

But in chrome after clicking ok or close button of alert, the focus does not return to field. Again the alert pop up. so Alert is keep poping up infinitely for every OK/Close click.

the chrome version is 63.0.3239.132

Capacitance answered 31/1, 2018 at 7:20 Comment(1)

Not quite sure but is alert async? That would mean that field gets focus while the alert is showing. If you click on the alert the field would lose focus again!? – Darbie 31/1, 2018 at 7:35

This looks like a chrome bug. Maybe you can file/upvote it at crbug.com.

Your need can be achieved with some workarounds.

Setting the field value to 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)">

In case, you don't need to clear the value, focus the element in a 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)">

Removing and adding the onblur event after alert finishes.

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

Fuzz answered 31/1, 2018 at 8:1 Comment(4)

this works but if go away from the field to any other application and come back, the issue remains. after a 10 or 15 click the alert pop up got closed – Capacitance 5/2, 2018 at 11:47

You mean both the cases ? – Fuzz 5/2, 2018 at 11:48

I tried Settimeout method As I could not clear the value – Capacitance 5/2, 2018 at 12:7

Updated the answer. Maybe the 3rd method will help you. – Fuzz 5/2, 2018 at 12:47

A cleaner way to achieve proper behavior is to get the element and call the blur method on it before displaying the alert, now you don't have to remove event listeners.

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

//remove focus
inputField.blur();

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

Medulla answered 20/6, 2019 at 18:31 Comment(0)

Best solution is to remove the onblur event and adding it back by setting setTimeout function.

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

Lely answered 20/6, 2022 at 7:14 Comment(1)

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Porphyritic 25/6, 2022 at 2:24

I was looking for the answer to a similar problem and found out that Chrome knows about this bug and has currently filed it as WontFix (https://bugs.chromium.org/p/chromium/issues/detail?id=666205).

An alternative solution to those that Vignesh Raja already posted is to add an if (document.activeElement == document.body). Apparently as the Chrome bug is an issue with how the alert manages its own blur function, this check allows to sidestep that problem. I have not tried this out in other Browsers so any comments on that are appreciated.

For future readers the original code would look like this:

<!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>

Moyna answered 27/9, 2022 at 18:42 Comment(0)

Recommended topics

Hot tags