CODEWITHSUNDEEP
javascripthtmlgoogle-chromeonbluronfocus
Siva Sankaran
Siva Sankaran

Reputation: 1566

onblur onfocus infinite loop issue in chrome

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

Upvotes: 8

Views: 12267

Answers (4)

CRuizH
CRuizH

Reputation: 70

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>

Upvotes: 0

shankar kanase
shankar kanase

Reputation: 107

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>

Upvotes: 0

Nelson Machado
Nelson Machado

Reputation: 16

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

Upvotes: 0

Vignesh Raja
Vignesh Raja

Reputation: 8781

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

Your need can be achieved with some workarounds.

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

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

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

Upvotes: 11

Related Questions