Javascript DOM Focus Event

Description

Javascript DOM Focus Event

View in separate window 

<!-- Demonstrating the onfocus and onblur events. -->
<html>
   <head>
      <title>A Form Using onfocus and onblur</title>
      <script type = "text/javascript">
         let helpArray = /*w w  w . j  a  v  a 2 s  . c  om*/
            [ "Enter your name in this input box.", // element 0
              "Enter your e-mail address in this input box, " +
              "in the format user@domain.", // element 1
              "Check this box if you liked our site.", // element 2
              "In this box, enter any comments you would " +
              "like us to read.", // element 3
              "This button submits the form to the " +
              "server-side script.", // element 4
              "This button clears the form.", // element 5
              "" ]; // element 6

         function helpText( messageNum ) 
         {
            document.getElementById( "tip" ).innerHTML =
                helpArray[ messageNum ];
         } // end function helpText
      </script>
   </head>
   <body>
      <form id = "myForm" action = "">
         <div>
         Name: <input type = "text" name = "name"                  
            onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
         E-mail: <input type = "text" name = "e-mail" 
            onfocus = "helpText(1)" onblur = "helpText(6)" /><br />
         Click here if you like this site 
         <input type = "checkbox" name = "like" onfocus =  
            "helpText(2)" onblur = "helpText(6)" /><br />

         Any comments?<br />
         <textarea name = "comments" rows = "5" cols = "45"  
            onfocus = "helpText(3)" onblur = "helpText(6)"></textarea>
         <br />
         <input type = "submit" value = "Submit" onfocus =  
            "helpText(4)" onblur = "helpText(6)" />
         <input type = "reset" value = "Reset" onfocus =  
            "helpText(5)" onblur = "helpText(6)" />
         </div>
      </form>
      <div id = "tip" class = "tip"></div>
   </body>
</html>



PreviousNext

Related