Sample Use of JavaScript OnFocus and OnBlur Event

Photo of Mike Dalisay
Modified Sunday, December 26, 2010
by - @ninjazhai
You can see this example on many sites today such as yahoomail.

Upper right corner Search Box of yahoomail
When you click on the search box, the word "Search" will gone. When you click on other part of the webpage, the word "Search" comes back in it.


Step 1: Create your index.html file and put the following codes:

          <title>Sample Use of JavaScript OnFocus and OnBlur Event</title>
     <input type="text" value="Type keywords here..." size="40"
       OnFocus="if(this.value=='Type keywords here...') this.value='';"
       OnBlur="if(this.value=='') this.value = 'Type keywords here...';" />

You may see this examle live:

This thing is used often in search boxes. You will save webpage space 'coz you won't have to put a label "Search" before the search box

Thank you for reading! Belated Merry Christmas and Advanced Happy New Year Everyone! :)

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.