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.

Table of Contents

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

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]

I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.