Sample Use of JavaScript OnFocus and OnBlur Event

[adinserter block=”34″]

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! 🙂


Comments

7 responses to “Sample Use of JavaScript OnFocus and OnBlur Event”

  1. Anonymous Avatar
    Anonymous

    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 !!!

  2. Thanks for your comment and additional info! 🙂

  3. your example does not show any search button to click. How to implement this in blogger default search box ?

  4. Yeah this tutorial is only about JavaScript OnFocus and OnBlur Event and not about searching like this http://www.codeofaninja.com/2010/11/how-to-searching-without-page-refresh.html

  5. 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.

    1. Hi there udhayanandhini, how about checking out the following posts of mine?

      PHP Send Mail Tutorial

      Send Email using GMail and PHPMailer

  6. 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? 🙁

Leave a Reply

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