Adding JavaScript events to an HTML input

Question

This code isn't working in Firefox but working on IE and Chrome. When I click inside the text box it runs the focusOut() and focusIn() functions. Is this behavior expected and is the syntax recommended?

<!doctype html>

<html>
  <head>
    <title>Page of Cage</title>
    <meta charset="UTF-8">
    <link rel="icon" href="mkx-logo.png" type="image/x-icon">
    <script type="text/javascript">
      function focusIn() {
        alert("focus In!");
      };

      function focusOut() {
        alert("focus OUT!");
      };
    </script>	
  </head>
  <body>
    <form>	
      Name:<input onfocus="focusIn()" onblur ="focusOut()" type="text" name="name"/> <br/>
      <input type="submit" value ="submit"/>			
    </form>
  </body>
</html>

This should work on all browsers since everything looks correct to me. — Derek 朕會功夫
– Derek 朕會功夫, Commented Jul 11, 2015 at 3:22
Be careful about using alerts from focus event handlers, because the alert itself removes focus from the element. — nnnnnn
– nnnnnn, Commented Jul 11, 2015 at 3:24
@PatrickRoberts - Not really deprecated, don't forget in the new AngularJS you can still do ng-eventname ;) — Derek 朕會功夫
– Derek 朕會功夫, Commented Jul 11, 2015 at 3:27
Try logging messages to the console instead using alerts. As @nnnnnn says, alerts gain focus and makes your input loses it, that is why it is firing both events. If you use console.log() instead alert , your input won't trigger blur event. — Mindastic
– Mindastic, Commented Jul 11, 2015 at 3:39

Kevin Hutchinson · Accepted Answer · 2015-07-11 04:25:57Z

2

Replace alert with console.log and watch your web browser console using the developer tools. Just like nnnnnn said in the comments.

answered Jul 11, 2015 at 4:25

Kevin Hutchinson

2,3732 gold badges17 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Malik Naik · Accepted Answer · 2015-07-11 04:44:25Z

0

Q:Why the code is not working?
A: onfocus is fired when focus is gained and onblur is fired when focus is lost. In your code when you focus on the textbox it generates onfocus and at the same time the alert box is generated and it has lost the focus. So, Both the function are launched.

Check out this Fiddle

answered Jul 11, 2015 at 4:44

Malik Naik

1,50015 silver badges16 bronze badges

Collectives™ on Stack Overflow

Adding JavaScript events to an HTML input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related