Question

I want to react to a blur event with a alert box. The idea is to validate the content and give feedback if the the value is not valid. I am not using the alert box for debugging, my client insists on that for giving the user feedback.
I had a similar here: (But this question is not redundant!) Focusout event loop

So my current solution looks like this way

HTML:

Type some stuff here:
<br>
<input type="text" id="test" />

JavaScript:

var doFocus = function () {
  $("#test").focus();
    console.log("do focus");
};

$("#test").blur(function () {
  console.log("Blur event got triggered.");
  alert("Blur event got triggered.");
  window.setTimeout(function () {
    doFocus();
  }, 1);
});

This works so far, but
the Problem is: if you open the site, click into the input field and then change the window. For example open a text editor, and then change back. The Safari gets stuck in a event loop (the callback is called again and again)…

Answer 1

Just remove this line:

alert("Blur event got triggered.");

Alert() should never been used in any blur event callback function.

UPDATE

DEMO

var doFocus = function () {
  $("#test").focus();
    console.log("do focus");
};

var bluring = function(sender){
    $(sender).off('blur');
    console.log("Blur event got triggered.");
    alert("Blur event got triggered.");
    window.setTimeout(function () {
      doFocus();
      $(sender).on('blur',function(){bluring(this)});
    }, 1);
};

$("#test").blur(function(){bluring(this)});