Home JavaScript

Sample Use of JavaScript OnFocus and OnBlur Event

You can see this example on many sites today such as 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.

HOW TOs.

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

<html>
     <head>
          <title>Sample Use of JavaScript OnFocus and OnBlur Event</title>
     </head>
<body>
     <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...';" />
</body>
</html>

TIPs

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

Download Source Code

You can download all the code used in this tutorial for only $5 $1!

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

Before you write a comment, please read this guide and our code of conduct.
7 replies
  1. Anonymous
    Anonymous says:

    Hi Everyone,
    this is great article but quite entertained!!!!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 more details check out the following link……
    http://mindstick.com/Articles/27987996-875c-4dea-a2c7-a0c63892ce89/?Implementing%20onblur%20event%20in%20Java%20Script

    Thanks !!!

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.