CODEWITHSUNDEEP
javascriptjquery
Chethan kailash
Chethan kailash

Reputation: 51

onfocusout for an event..alert got stucked into infinite loop

I have added an onfocusout attribute to my HTML tag and I added an alert in the function but the alert function is running infinite loop as it is out of focus of that element.

How to close that alert at once?

eg:

<html>
<body>
  <input type="text" id="a" onfocusout="hello()" name="name" />
  <script>
    function hello(){
      var x= document.getElementById("a").value.length;
      if("x<6"){
         alert("minimum 6 digits");
         document.getElementById("a").value='';
         document.getElementById("a").focus();
      }
    }
  </script>
</body>
</html>

My code is similar to this which run infinite alert.

Upvotes: 5

Views: 1033

Answers (3)

Cesar Devesa
Cesar Devesa

Reputation: 1307

Perhaps the best way is to use setTimeout() after alert(). For the post question example:

  <html>
    <body>
      <input type="text" id="a" onfocusout="hello()" name="name" />

      <script type="text/javascript">

        function hello(){

          let x = document.getElementById("a").value.length;

          if(x < 6){                 
             document.getElementById("a").value='';

             alert("minimum 6 digits");     
             setTimeout(() => { 
               document.getElementById('a').focus();
             }, "100")

          }
        }

      </script>

    </body>
  </html>

Upvotes: 0

Mark
Mark

Reputation: 2061

this behavior is happening because when you use focus it will re attach the focusout event handler. So what you have to do, first is to remove the focusout event handler, and attach it again when your condition is true

if(x < 6){
  alert("minimum 6 digits");
  $("#a").val('');
  $("#a").off("focusout");
  $("#a").focus();
  $("#a").on("focusout", hello);
}

furthermore, this is not enough. because after you set the value of input with ID 'a' to '', when you reattach the event, it will keep going inside your condition, because the current value is '' (which means its length is 0), and will keep reattach your event handler. So, you need another global variable to check, whether current status is checking, or no

var check = false;

then you need to check that variable each time you want to re attach your event handler, if its false (means currently its not checking), then you can reattach. but will re attach, you set that variable to true. After finish re attaching, then you set that variable back to false.

  if (check == false)
  {
    if(x < 6){
      check = true;
      alert("minimum 6 digits");
      $("#a").val('');
      $("#a").off("focusout");
      $("#a").focus();
      $("#a").on("focusout", hello);
    }
  }
  else
  {
    check = false;
  }

demo : https://jsfiddle.net/t3aoenvd/

Upvotes: 2

Anish Joseph
Anish Joseph

Reputation: 1026

Try this

<html>
    <body>
        <input type="text" id="a" onfocusout="hello()" name="name" />
        <script>
        function hello(){
             var x= document.getElementById("a").value.length;
             if(x < 6){
                     alert("minimum 6 digits");
                     document.getElementById("a").value='';
                     document.getElementById("a").focus();
             }
        }
        </script>
    </body>
</html>

Upvotes: 0

Related Questions