Skip to content

The Dummy Programmer

Stories of daily programming

  • Home
  • The Dummy Programmer Robot
    • Overview
    • Version history & downloads
    • Tutorials
      • TDP Robot – The basics
      • A simple SQL Server backup solution
      • A simple SQL Server backup solution – A next step
  • My other dummy projects
  • Games
    • Space Y: An Asteroids clone
  • Services
    • What’s my user agent
    • What’s my IP address
  • About
  • Toggle search form

Google Chrome OnBlur endless loop

Posted on July 1, 2019July 1, 2019 By

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!

 

Google Chrome, Web programming

Post navigation

Previous Post: Improving SQL Server cursor performance
Next Post: How to know who is blocking a query in Sql Server

Related Posts

Configure a PHP development environment in Windows (part 1 of 4) PHP
Configure a PHP development environment in Windows (part 4 of 4) MySql
Failed to decode downloaded font: (your web application address) ASP.NET
Configure a PHP development environment in Windows (part 3 of 4) PHP
Configure a PHP development environment in Windows (part 2 of 4) PHP

Search

Related posts

  • Samsung Galaxy TAB S2 endless reboot
  • Migrating Google GSuite mailboxes to Microsoft Office 365

Categories

  • .NET 6 (1)
  • AJAX (1)
  • Android (2)
  • Apache (4)
  • ASP.NET (9)
  • ASP.NET MVC (3)
  • Avalonia UI (1)
  • BCP (1)
  • Bitlocker (2)
  • C# (14)
  • CentOS (4)
  • ClosedXML (1)
  • CLR (1)
  • DNS (1)
  • Encryption (3)
  • Excel (2)
  • FuelPHP (3)
  • Games (2)
  • Google Chrome (1)
  • GSuite (1)
  • HTML (1)
  • Imagick (2)
  • Javascript (1)
  • Kindle (1)
  • LAMP (3)
  • Linux (6)
  • MariaDB (2)
  • Mathematics (2)
  • MySql (4)
  • NPOI (1)
  • Office 365 (1)
  • Perl (1)
  • PHP (6)
  • Programming (1)
  • Remote desktop (1)
  • SFTP (2)
  • Sockets (3)
  • Sql Server (18)
  • Sql Server 2016 (14)
  • Sql Server 2019 (1)
  • SSL (2)
  • Task scheduler (1)
  • Telerik ASP.NET AJAX (2)
  • The Dummy Programmer Chat (2)
  • The Dummy Programmer Robot (6)
  • Threading (5)
  • Tools (1)
  • TPL (3)
  • TypeScript (3)
  • Ubuntu (4)
  • Virtualization software (3)
  • Visual Studio (1)
  • Visual Studio Code (2)
  • Web fonts (1)
  • Web programming (6)
  • Windows (12)
  • Windows 10 (15)
  • Windows Forms (1)
  • Windows Server (6)

Copyright © 2023 The Dummy Programmer | Privacy Policy | Terms of use |

Powered by PressBook Masonry Dark