Sample Use of JavaScript OnFocus and OnBlur Event

You can see this example on many sites today such as yahoo mail.

When you click on the search box, the word “Search” will go.

When you click on another 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 the label “Search” before the search box

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

Published
Categorized as JavaScript

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]

7 comments

  1. Hi mike..

    Thanks for your kind reply and time.. i jus embed ur php code in html but while i trying to run its not working. i don’t know where i made mistake.can you help me? :(

  2. Hi mike..

    i want to create a form with a submit button which will send the form details to my mail id. i searching for this for a long time but i can’t findout ..can you help me??? please.

  3. 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 comment

Your email address will not be published. Required fields are marked *

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

Back to top