onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript JS Example
Get 5 Hours of FREE PREMIUM Videos:
LearnVisualStudio.NET Free Preview
“ I am a lifetime member of LearnVisualStudio.net and a Premium Plus member of dotNetVideos.net.
LearnVisualStudio.net is awesome because it grows in value each year as more videos are added.
dotNetVideos.net is also great because it focuses a lot on MS Certifications and practical interview questions.
”
- Wade Harvey (IdealProgrammer.com)
LearnVisualStudio Premium Videos
 |  |  |  |  |
 |  |  |  |  |
 |  |  |  |  |
 |  |  |  |  |
 |  |  |  |  |
 |
dotNetVideos Premium Video Catalog
 |  |  |  |  |
 |  |  |  |  |
 |  |  |  |  |
 |  |  |  |  |
 |  |  |  | |
Premium (Not Free) Video Tutorials
Free Video Tutorials & Free Tools
onBlur JavaScript (JS) Example: HTML DOM Objects – Event – onBlur JavaScript (JS) Example
Purpose: – Illustrates the JavaScript syntax for the onBlur Event.
Prerequistes:
- Install Visual Web Developer 2008
Syntax: Object.onBlur="yourjavascriptcode()" – Allows you to know when element has lost focus.
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:
- Use Visual Web Developer 2008
- Create new web site;
- Click File/New Web Site
- Select ASP.NET Website Template
- Select C-Sharp for language
- name of Web Site could be JavaScript_Syntax.
- Add New folder named "HTMLDOMObjects"
- Right-click project name in solution explorer;
- add new folder;
- name of folder should be: HTMLDOMObjects
- Add New subfolder to "HTMLDOMObjects" folder named "DOMEvent"
- Right-click folder named "HTMLDOMObjects" in solution explorer;
- add new folder;
- name of folder should be: DOMEvent
- Add New subfolder to "DOMEvent" subfolder named "EventHandlers"
- Right-click subfolder named "DOMEvent" in solution explorer;
- add new folder;
- name of folder should be: EventHandlers
- Add HTML Page Named onBlur to EventHandlers subfolder
- Right-click EventHandlers subfolder;
- add new item;
- Select HTML Page
- HTML Page name should be onBlur
- Click on copy code in code below to copy code into HTML Page onBlur.htm
- Right-click on HTML page onBlur.htm and select view in browser
| HTML | | copy 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> |
Related posts:
- HTML DOM Event Object Examples JavaScript (JS) HTML DOM Event Object Examples JavaScript (JS)...
- onAbort JavaScript (JS) Example: HTML DOM Objects – Event – onAbort JavaScript (JS) Example onAbort JavaScript (JS) Example: HTML DOM Objects - Event -...
- id JavaScript (JS) Example: HTML DOM Objects – Button Object – id JavaScript (JS) Example id JavaScript (JS) Example: HTML DOM Objects - Button Object...
- name JavaScript (JS) Example: HTML DOM Objects – Button Object – name JavaScript (JS) Example name JavaScript (JS) Example: HTML DOM Objects - Button Object...
- value JavaScript (JS) Example: HTML DOM Objects – Button Object – value JavaScript (JS) Example value JavaScript (JS) Example: HTML DOM Objects - Button Object...
Related posts brought to you by Yet Another Related Posts Plugin.
sdfsf
Hello Everyone,
this is great article but quite entertained, here is brief description about onblur event in javascript is……In this demonstration we learn how to implement onblur event in java script. We know that onblur event trigger any java script method when specified control where onblur event is registered is losing the focuses……. for details please check out the following link…….
http://mindstick.com/Articles/27987996-875c-4dea-a2c7-a0c63892ce89/?Implementing%20onblur%20event%20in%20Java%20Script
thanks a lot !!!!!!