Search code examples
javascriptjqueryhtmlgoogle-chromeonblur

Alert Comes Continuously when clicks outside chrome

I am using onblur on a text box and show an alert. But when I click outside my chrome browser after entering something in text box and then click on the chrome browser button in the task bar, the alert appears continuously. After clicking again on the chrome browser button the alert will appears only once.

This is my code: 

<!DOCTYPE html>
<html>
<body>
  Enter your name: <input type="text" id="fname" onblur="myFunction()">

  <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

  <script>
    function myFunction() {
      var x = document.getElementById("fname");
      alert(x.value.toUpperCase());
    }
  </script>
</body>
</html>

Solution

  • Based on your question, I would recommend using keyup as shown below: 

    function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
    Enter your name: <input type="text" id="fname" onKeyup="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>