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:
1 | <input type="text" value="Search..." onclick="if(this.value=='Search...'){this.value=''}" onblur="if(this.value==''){this.value='Search...'}"> |
Steps + Explanation
- Locate your standard input/search field
- 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. - 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!
Loading ...
Thank you very much. Nice and easy. Just trying to see if teh same approach works with textareas.
Thanks. Very simple and useful solution. Just what I was looking for.
Just what I needed. This helped me so much.
good one...keep it up
Amazing...........
Thanx a lot Sir....Thanx a lot...
Good... Work fine
Thanks
simple and easy, thanks.
works like a charm!
What if the text is bound at server and may change? how to make this work because we are giving a default value "Search"?
please help...
@jithil, the answer to that is actually quite simple. Since the "server side" stuff happens before any of the client site code (HTML) is outputted, what you can set the value dynamically to be whatever you want. For example, in PHP, it would be something like this...
< input type="text" value="" onclick="if(this.value==''){this.value=''}" onblur="if(this.value==''){this.value=''}">As you can see, I placed the PHP inline and replaced all instances of the "Search..." string with
The only thing you'll have to do is define what $value is set to somewhere in your dynamic script.
Please let me know if you have any questions!
Use placeholder in the input field.
< input type="text" name="username" id="username" class="form-login" size="30" placeholder="Enter Your Email/Username/Emp ID."/>
thanks.... buddy
man, you`re heaven