PDA

View Full Version : Default text



new_comer
Mar 22nd, 2010, 12:50 PM
Hello everybody,

I have encountered problem on formating text box with HTML. I'm wondering on how to fill in some default text (blurred) with text box which will be cleared when user click on the box and put in login name just like signing in hotmail. Many thanks in advance.


Kind regards


Newbie

mbaker
Mar 22nd, 2010, 05:14 PM
Not sure how you would get blurred text.

This will give you a light grey text:


<input style="color:silver;" onclick="if(this.value='login name')
{this.value='';this.style.color='black';}" value="login name">

Obviously you would want to add more attributes to make this useful.

new_comer
Mar 22nd, 2010, 06:03 PM
Very much thanks mBaker,

First of all, I have to apologize for my wording, as it should be light grey text instead of blurred... I've tried your code and it works. But I would like to ask some more as how can I make the default value "login name" reappear when I click on the page instead of the text box again. Thank you for all advices.


Kind regards


Newbie

mbaker
Mar 24th, 2010, 10:15 PM
You can reverse the effect using the onblur attribute. If you do, you may want to use the matching onfocus instead of onclick. Your input tag would then be:


<input style="color:silver;" onfocus="if(this.value=='login name')
{this.value='';this.style.color='black';}" onblur="if(this.value=='')
{this.value='login name';this.style.color='silver';}" value="login name">

I've assumed you will only want to revert to "login name" if nothing has been entered in the field.

I have also corrected an error in the original. Instead of testing if(this.value='login name') which assigns 'login name' to this.value and is always true, the test should be if(this.value=='login name').

new_comer
Mar 25th, 2010, 04:25 AM
Thanks mbaker for all your information and advices.


Newbie