CODEWITHSUNDEEP
javascripthtml
thinker
thinker

Reputation: 91

Adding JavaScript events to an HTML input

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>

Upvotes: 0

Views: 71

Answers (2)

Malik Naik
Malik Naik

Reputation: 1502

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

Upvotes: 0

Kevin Hutchinson
Kevin Hutchinson

Reputation: 2373

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

Upvotes: 2

Related Questions