Progress Monitor for IdealProgrammer.com

Take Swift, Intelligent, Massive, Planned, Loving, Effective (S.I.M.P.L.E.) Action to Transform Self into Ideal

Skip Repetitive Navigational Links
Home
News
Presenters
Contact
Please login

onBlur JavaScript (JS) Example

Description: Illustrates the JavaScript syntax for the onBlur Event.
Syntax: Object.onBlur="yourjavascriptcode()" – Allows you to know when element has lost focus.
onBlur JavaScript (JS) Example Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: onBlur </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
      //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    DOM Event - EventHandlers   ***
       //*****************************************************
 
       //*****************************************************
       // onBlur
       //*****************************************************
 
       //    SYNTAX:
       //    object.onBlur="yourjavascriptcode()"  Allows you to know when object
       //    has lost focus
       =================================================================
       An EXCELLENT tutorial on event basics can be found at:
       http://www.quirksmode.org/js/introevents.html
       =================================================================
       You can access the following properties thru the event handler:
 
        Available Properties
        altKey	     Retrieves a value that indicates the state of the ALT key.
        altLeft      Retrieves a value that indicates the state of the left ALT key.
        clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
        clientY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
        ctrlLeft	 Sets or retrieves the state of the left CTRL key.
        offsetX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the object firing the event.
        offsetY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the object firing the event.
        screenX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the user's screen.
        screenY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the user's screen.
        shiftLeft	 Retrieves the state of the left SHIFT key.
        srcElement	 Sets or retrieves the object that fired the event.
        type	     Sets or retrieves the event name from the event object.
        x	         Sets or retrieves the x-coordinate (in pixels) of the mouse pointer's offset from the closest relatively positioned parent element of the element that fired the event.
        y	         Sets or retrieves the y-coordinate (in pixels) of the mouse pointer's offset from the closest relatively positioned parent element of the element that fired the event.
 
    -->
    <script type="text/javascript">
 
 
        function writeAvailableProperties() {
            document.write(event.altkey + " - altKey	     Retrieves a value that indicates the state of the ALT key.<br />");
            document.write(event.clientX + " - clientX	     Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.<br /><br />Use back button to return to page.");
        }
        function doSomething(e) {
            if (!e) var e = window.event
            // e refers to the event
 
            document.write(e.clientY + " - clientY	     Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.<br /><br />Use back button to return to page.");
        }
    </script>
 
 
   </head>
  <body>
 
<input type="text" 
    name="txtState" 
    value="State" 
    onblur="alert(event.srcElement.name + '\n' + event.srcElement.type)" /><br />
<input type="text" 
    name="txtCountry" 
    value="Country" 
    onblur="writeAvailableProperties()" /><br />
<input type="text" 
    name="txtZip" 
    value="Zip" 
    onblur="alert(event.srcElement.name + '\n' + event.srcElement.type)" />
      <input id="Button1" type="button" value="button" />
      <script type="text/javascript">
          // This is the "traditional" and recommended technique for registering an event
          // handler because it allows you to separate structure from behavior; the
          // "inline" method of registering an event within xhtml tags is not
          // the recommended approach because it blurs structure and behavior.
          // For complete explanation, please see the following excellent article:
          // http://www.digital-web.com/articles/separating_behavior_and_structure_2/
          //
          // Note: Using getElementById so registering event will work in FireFox
          //
      var myButton = document.getElementById("Button1")
          myButton.onblur = doSomething;
          if (myButton.captureEvents) myButton.captureEvents(Event.BLUR);
      </script>
</body>
 
</html>