Google Chrome OnBlur endless loop - The Dummy Programmer

Today I want to talk about a very strange problem found developing a web page and using that web page in Google Chrome.

Suppose you have the following, simple, HTML page:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<form>
  Test1: <input id="Test1" type="text" value="" onfocus="OnFocus1()" onblur="OnBlur1()">
  Test2: <input id="Test2" type="text" value="" onfocus="OnFocus2()" onblur="OnBlur2()">
</form>
<script>
function OnFocus1() {
  console.log("OnFocus1()");
}

function OnFocus2() {
  console.log("OnFocus2()");
}

function OnBlur1() {
  console.log("OnBlur1() Start");
  alert('OnBlur1');
  console.log("OnBlur1() End");
}

function OnBlur2() {
  console.log("OnBlur2() Start");
  alert('OnBlur2');
  console.log("OnBlur2() End");
}
</script>
</body>
</html>

In the input boxes contained in the page, the “onblur” event is handled with a method that shows an alert.

In real life this may happen if you apply some validation rules to the value of the input box and then show an alert in case of error.

But here lies the problem… In Chrome, if you enter some text in “Test1” and pass the focus to “Test2” to enter something else, you will enter in a loop that shows the alert “OnBlur2” endlessly.

This doesn’t happen with others browser like Firefox.

The only thing I could find to workaround the problem is move the focus to another control before showing the alert, as you can see in the updated version of the page:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<form>
  Test: <input id="Test1" type="text" value="" onfocus="OnFocus1()" onblur="OnBlur1()"><input id="BtnTest" type="button" value="Test"><br>
  Test2: <input id="Test2" type="text" value="" onfocus="OnFocus2()" onblur="OnBlur2()">
</form>
<script>
function OnFocus1() {
  console.log("OnFocus1()");
}

function OnFocus2() {
  console.log("OnFocus2()");
}

function OnBlur1() {
  console.log("OnBlur1() Start");
  var BtnTest = document.getElementById("BtnTest");
  BtnTest.focus();
  alert('OnBlur1');
  console.log("OnBlur1() End");
}

function OnBlur2() {
  console.log("OnBlur2() Start");
  var BtnTest = document.getElementById("BtnTest2");
  BtnTest.focus();
  alert('OnBlur2');
  console.log("OnBlur2() End");
}
</script>
</body>
</html>

Hope this it can help you in some way… Have a nice day!

Related Posts