Clear Text On Input Field On Click
Ever wanted to add text to your input fields and have it disappear when your visitor starts adding their info?
Better still, have it reappear if the visitor adds nothing?
Like this:
Here’s the code:
<input type="text" name="field-name-here" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Enter Email To Get Updates':this.value;" value="Enter Email To Get Updates" />
Replace Enter Email To Get Updates with your own text.
Just a simple technique which works great.
Tags: Clear Text, Code, Input Field, Javascript, On Click, OnClick
95% Of Your Minisite Design Done For You--INSTANTLY?
This is a complete solution! We're Talking Full Blown Graphics--From Top To Bottom--At A FRACTION Of What You Would Pay A Designer! Find out more.
Related Posts
- A Little Hack to Get Your Password Back
This can either be a very useful or a very dangerous trick... - CForms II – The All In One Contact Form Solution
Cforms II is a Wordpress plugin which makes it easy for you... - Adding Live Preview For Comments
If you scroll down you will see a live preview option for... - Adding Code To Your Wordpress Post
Trying to add code to your wordpress post can be one of... - Separate Your Trackbacks From Your Comments
It is amazing how many blogs do not do this. They have...
Krystine says:
On September 15th, 2008 11:41 am
Thanks for the post. Really liked the idea will include this in my website.
Roger Hamiltone says:
On October 3rd, 2008 12:20 pm
Great post. Thanks for sharing the code.
Taylor from Adobe Flex Classes says:
On November 19th, 2008 3:31 pm
That is a very good breakdown of how to input text on an input field. I will add this to my website right away.
Abbey from homecoming dress says:
On July 6th, 2009 2:34 pm
That is great. I usually face problems with my blog comments as visitors do not see this sign “YourName@YourKeywords” and post their comments with weird names, making my blog look awful. Now, I’ll save a lot of time which I spend for moderation.
Cyryl says:
On August 13th, 2009 6:22 pm
…But what if you want to go and edit or add to the text box later on?
This code is set to clear the field each time you click the field. If you use TAB or ALT+TAB to navigate back to the field, it just highlights the text… You can then press END to go to the end of the text and continue typing or use your arrow keys to go to what you want to edit…
But most people will use their mouse to go back into the field. How do we prevent the field from clearing itself onClick after it’s been edited once before?
Cyryl says:
On August 14th, 2009 5:27 pm
Here we go. I resolved the issue. This is a bit more practical than the code above is – if you’re editing a text field then coming back to it later:
–head–
–script type=”text/javascript”>
function clearMe(formfield){
if (formfield.defaultValue==formfield.value)
formfield.value = “”
}
–/script–
–/head–
–body–
–input type=”text” name=”" size=”xx” value=”xx” onfocus=”clearMe(this)”>
–/body–
Erum Munir says:
On August 21st, 2009 12:57 am
Thanks! I’ll check it out!
Mack from Las Vegas Real Estate says:
On September 22nd, 2009 7:24 am
Cyryl I never thought making those text box with auto clear text feature would be so easy as a copy paste. Your tips are very instructive and easily understandable for no techie like me.. Unfortunately can you throw some light on the javascript you have used it the comments?
Regards,
Mack McMillan
Cyryl says:
On October 15th, 2009 12:36 am
I think I know what you’re asking here. I’m used to using the Javascript. Not explaining… So I’ll try… Hope it helps you.
1.) “function clearMe(formfield)”
This is the function that is defined in the script. (”function” is a general or common variable used in Javascript. It can refer to anything you want it to as long as you define it.) In this case, “clearMe” is referring to a FORM or input.
2.) “if (formfield.defaultValue==formfield.value)
formfield.value = “””
“if” is a boolean term used to say, “If this is the current state of”. Then you define the state that something must be in to activate the function called upon. So basically this says, “IF the FORMFIELD’s DEFAULTVALUE is equal to NOTHING, then do THIS.” you can basically tell the script to activate itself when the contents of your formfield equal what you are defining in the formfield,value=”VALUEHERE” part.
3.) –input type=”text” name=”” size=”xx” value=”xx” onfocus=”clearMe(this)”>
This is where you are putting your INPUT form field. It is a TEXT input field whose NAME is whatever you want it to be… The size of the field (in width of characters) is defined after that. The DEFAULT VALUE (what you want in the field when you first see it…) is defined in “VALUE”.
“onFocus” basically means “when you click this with your mouse” or ‘bring this field into focus’ as it were…
“clearMe(this)” is the defined action for “onFocus”. This action refers back to the defined function in the Javascript above, you’ll notice. By calling “clearMe” when the box is empty, the form is then calling upon the script and the defined action inside of it.
So what this means is that when you bring click the box to bring it into focus, the defined action is that the script will clear the box.
Wow I sure I hope I made SOME sense in all of this. I’m tired and was actually just about to go to bed.
I hope that helps.
Cyryl