Explanation with code :
In this example we have created three text boxes for First name, Middle name and Last name and as soon as we lost focus from the text box, onBlur() event occurs and specified function or methods is invoked. Here we have created three function which are invoked on the blur event of the given three input text boxes.
Function addFName() is called on the blur event of first text box ( first name), function addMName() is called on the blur event of the second text field (middle name) and addLName() function is called on blur event of third text field ( last name ).
|<input type="text" value="" id="fname" onBlur=addFName()>|
As you can see from the above code that we have invoked the addFName() method on the blur event Here is the full source code as follows :
As soon as we lost focus from the very first text box it calls the "onBlur" event and an alert message floats showing "First name blurred" message.
As we click on the "Ok" button of alert message box it writes text into the first text box and focus goes on the second text box.
As we move the focus from the second text box it again floats an alert message.
You can also download source code from the following link :
Liked it! Share this Tutorial