Javascript Function - How to make a form textbox Clear with onClick and show default text onBlur

This javascript tutorial i will show how clear textbox with onClick and show text onBlur if user clicks a search box, you want the default text to clear away. and If user click away without typing anything, the default text should return.

you can do it very easily by using the below code .


<input type="text" name='txtsearch' value="Enter Search Keyword" onclick="if(this.value=='Enter Search Keyword'){this.value=''}" onblur="if(this.value==''){this.value='Enter Search Keyword'}"/>

For asp.net Server control

<asp:TextBox id="txtsearch" Text="Enter Search Keyword" onclick="if(this.value=='Enter Search Keyword'){this.value=''}" onblur="if(this.value==''){this.value='Enter Search Keyword'}" > </asp:TextBox>


here i am giving step by step Explanation

1. Find your search field where you want to use that code.
2. Insert the following code to the input tag:
onclick="if(this.value=='Search...'){this.value=''}"
This code will clear textbox when someone clicks in it.
3. Insert the following into the input tag:
onblur="if(this.value==''){this.value='Search...'}"
This code is responsible for setting the default text if it was left blank.

by using the above code you can achive a good working for your Search Box.
Tags: , ,

Join Us!