I have an input text and a button for checking the input text value.

When the web page is loaded, the input text has the focus and this value is empty by default.

So when you put the focus outside the input text (onblur), the check_input_value(event) function executes the alert("Your input value must not empty") one time when the input text value is empty.

This works perfectly in Firefox. But in Chrome, this alert is executed indefinitely instead of one time.

Here the code (you can try it (try it with Chrome) at / ) :

<input type="text" id="input_text"> <input type="button" value="Check input value" onclick="check_input_value(event);">

<script type="text/javascript">

//Get the input text element :
input_text = document.getElementById("input_text");

//Put focus in input text :
input_text.focus();

/*Add event listener in the input text element.
On blur, if your input value is empty, then execute check_input_value(event) function
to check input text value :
*/
input_text.addEventListener('blur', 

                                    function(event) 
                                    {
                                        var event = window.event || event;
                                        check_input_value(event);
                                    }
                                    , false
                          );

//Function for checking input text value :
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.                          
function check_input_value(event)
{
    var event = window.event || event;

    if(input_text.value == "")
    {
        alert("Your input value must not empty");

        input_text.focus();

        return false;
    }   
}

</script>

So how to execute one time the alert instead of indefinitely in Chrome?

I have an input text and a button for checking the input text value.

When the web page is loaded, the input text has the focus and this value is empty by default.

So when you put the focus outside the input text (onblur), the check_input_value(event) function executes the alert("Your input value must not empty") one time when the input text value is empty.

This works perfectly in Firefox. But in Chrome, this alert is executed indefinitely instead of one time.

Here the code (you can try it (try it with Chrome) at https://jsfiddle/fcg86gyb/ ) :

<input type="text" id="input_text"> <input type="button" value="Check input value" onclick="check_input_value(event);">

<script type="text/javascript">

//Get the input text element :
input_text = document.getElementById("input_text");

//Put focus in input text :
input_text.focus();

/*Add event listener in the input text element.
On blur, if your input value is empty, then execute check_input_value(event) function
to check input text value :
*/
input_text.addEventListener('blur', 

                                    function(event) 
                                    {
                                        var event = window.event || event;
                                        check_input_value(event);
                                    }
                                    , false
                          );

//Function for checking input text value :
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.                          
function check_input_value(event)
{
    var event = window.event || event;

    if(input_text.value == "")
    {
        alert("Your input value must not empty");

        input_text.focus();

        return false;
    }   
}

</script>

So how to execute one time the alert instead of indefinitely in Chrome?

• javascript
• google-chrome
• dom-events
• alert

• elaborate the question. What do you want?? – Pranav Kumar Commented Sep 30, 2016 at 11:07
• In Firefox, when you click outside the input text, the alert is displayed and when you click the ok button of the alert, no more alert is displayed => No problem. But in chrome, when you click the ok button of the alert, a another alert is displayed : I want to stop this second alert. – totoaussi Commented Sep 30, 2016 at 11:09
• This question helped me even though none of the answers specifically applied. In my case, I was using onFocus in an input field to check of a select box had been set. Because Chrome was automatically returning the focus to the input field, I had the same problem @totoaussi had. In my case, I had to add document.getElementById($select).focus() after my if-then check for the alert. – JBH Commented Aug 24, 2021 at 22:50

4 Answers 4

The chrome execute indefinitely instead of one time because your function always return the focus to the input text and always you change the focus your function will be call. In Firefox works well because the input text does not receive the focus in the end of the javascript function. If you remove input_text.focus(); it is going to work.

Thanks for the link to jsfiddle. I tried working on it and found that the input_text.focus() was getting called recursively.

I mented that and it worked. I think you should call the input_text.focus() somewhere outside where the call may not be recursive.

This is the link where I tried: https://jsfiddle/fcg86gyb/1/

//Get the input text element :
input_text = document.getElementById("input_text");

//Put focus in input text :
input_text.focus();

/*Add event listener in the input text element.
On blur, if your input value is empty, then execute check_input_value(event) function :
*/
input_text.addEventListener('blur', 

                                function(event) 
                                {
                                    var event = window.event || event;
                                    check_input_value(event);
                                }
                                , false
                      );

//Function for checking input text value :
//if the input value is empty, display alert "Your input value must not     empty", and put focus in input text.                          
function check_input_value(event)
{
    var event = window.event || event;

if(input_text.value == "")
{
    alert("Your input value must not empty");
    //input_text.focus();

    return false;
}   
}

If you need to maintain the focus on the textbox after showing the alert box only once, you can make use of temporary variable as I stated in the ment and you can achieve the same as follows:

//Get the input text element :
input_text = document.getElementById("input_text");

//Put focus in input text :
input_text.focus();
var temp = 0;
/*Add event listener in the input text element.
On blur, if your input value is empty, then execute check_input_value(event) function :
*/
input_text.addEventListener('blur', 

function(event) 
{
    var event = window.event || event;
    if(temp == 0)
    {
        check_input_value(event);
    }
    else
    {
        button_focus();
    }
}
, false);

//Function for checking input text value :
//if the input value is empty, display alert "Your input value must not empty", and put focus in input text.                          
function check_input_value(event)
{
var event = window.event || event;

    if(input_text.value == "")
    {
    alert("Your input value must not empty");
    input_text.focus();
    temp = 1;
    return false;
    }   
}
function button_focus()
{
    if(input_text.value == "")
    {
    input_text.focus();
    }
    temp = 0;
    return false;
}

Hope it helps.

This seems to be a bug in Chrome 52 (discussed here). A workaround that came up was to remove the blur event and reattach it in a timeout:

if(input_text.value == "")
{
    alert("Your input value must not empty");

    var tmpBlur = input_text.blur;
    input_text.blur = null;     
    setTimeout(function() {
        input_text.focus();
        input_text.blur = tmpBlur;
    }, 0);

    return false;
}   

https://jsfiddle/wpys5x75/3/

EDIT:

However it looks like you still get the same infinite loop when you click outside the window. Another work around would be to assign a different value and then reassign the value in the timeout:

if(input_text.value == "")
{
    alert("Your input value must not empty");

    input_text.value = ' ';
    setTimeout(function() {
        input_text.focus();
        input_text.value = '';
    }, 0);

    return false;
}   

https://jsfiddle/wpys5x75/5/

I too faced same issue; I solved it by calling the focus method using setTimeout method. Code goes as below:

function check_input_value(event)
{
    var event = window.event || event;

    if(input_text.value == "")
    {
        alert("Your input value must not empty");

        setTimeout (function(){input_text.focus()}, 0);

        return false;
    }   
}