JavaScript blur() Example: HTML DOM Objects – Anchor Object – JavaScript blur() Example

Posted by on Sunday, January 31, 2010 · Leave a Comment 

JavaScript blur() Example: HTML DOM Objects – Anchor Object – JavaScript blur() Example

Purpose: – Illustrates the for the .

View Other Anchor Object Properties and Methods

Prerequistes:

Syntax: anchorObject.blur() – Allows you to remove focus from an anchorObject

Restrictions: None

Notes:

  • You can build your own library of syntax examples by using same web site over and over and just add new files to it.

Instructions:

  1. Use Visual Web Developer 2008
  2. Create new web site;
    • Click File/New Web Site
    • Select ASP.NET Website Template
    • Select C-Sharp for hrefuage
    • name of Web Site could be JavaScript_Syntax.

    3. Folder

  3. Add New folder named “HTMLDOMObjects”
    • Right-click project name in solution explorer;
    • add new folder;
    • name of folder should be: HTMLDOMObjects
  4. Add New subfolder to “HTMLDOMObjects” folder named “DOMAnchor”
    • Right-click folder named “HTMLDOMObjects” in solution explorer;
    • add new folder;
    • name of folder should be: DOMAnchor
  5. Add New subfolder to “DOMAnchor” subfolder named “AnchorObjectMethods”
    • Right-click subfolder named “DOMAnchor” in solution explorer;
    • add new folder;
    • name of folder should be: AnchorObjectMethods
  6. Add HTML Page Named blur to AnchorObjectMethods subfolder
    • Right-click AnchorObjectMethods subfolder;
    • add new item;
    • Select HTML Page
    • HTML Page name should be blur
  7. Click on copy code in code below to copy code into HTML Page blur.htm
  8. Right-click on HTML page blur.htm and select view in browser
View Example In Browser
< !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: blur </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
 
 
    -->
  <style type="text/css">
a:focus, a:active
{
color:red;
}
</style>
<script type="text/javascript">
    //*****************************************************
    // DOM Objects
    //*****************************************************
 
 
    //*****************************************************
    //    ***    Anchor Object Methods   ***
    //*****************************************************
 
    //*****************************************************
    // blur
    //*****************************************************
 
    //    SYNTAX:
    //    anchorObject.blur()  Removes focus from anchorObject
    function getfocus() {
        document.getElementById('myObject').focus()
    }
    function removefocus() {
        document.getElementById('myObject').blur()
    }
</script>
 
 
   </head>
  <body>
      <a id="myObject"
href="http://idealprogrammer.com">IdealProgrammer.com</a>
<br /><br />
<input type="button" onclick="getfocus()" value="Get focus" />
<input type="button" onclick="removefocus()" value="Remove focus" />
 
 
 
 
  </body>
</html>

Filed under Code Samples · Tagged with , , , ,