Pages

Tuesday, July 31, 2012

Clear textbox with onClick & onBlur

When somebody clicks a search box, you expect the default text to clear away. If they click away without typing anything, the default text should return. Typical behavior, right? Here's how it's done:

HTML : 

<input type="text" value="Search" onclick="if(this.value=='Search'){this.value=''}" onblur="if(this.value==''){this.value='Search'}">



Example : 




Steps + Explanation

  1. Locate your standard input/search field
  2. Insert the following into the input tag:    onclick="if(this.value=='Search...'){this.value=''}"    This is responsible for clearing textbox when someone clicks in it.    
  3. Insert the following into the input tag:    onblur="if(this.value==''){this.value='Search...'}"    This is responsible for resetting the default text if it was left blank.

So, with some super-basic JavaScript, you can achieve this tiny detail that makes a world of a difference in the world of Interaction Design. Note: Don't forget to change "Search..." to your own value!

No comments:

Post a Comment