That is a very good breakdown of how to input text on an input field. I will add this to my website right away.

http://www.bettercloset.com Abbey@homecoming dress

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

…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

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:

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

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.

“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.

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

http://www.risingrealty.com/ David@Chicago Real Estate

I think adding code like this adds value to your site and improves functionality for your users.

Ian

Thanks Cyryl!

To go one step further, restoring some of your original functionality, you can add this function:

Then add this to each input field after the onfocus:
onblur=”restoreMe(this)”

http://www.homecomingdresses.org Ann@Homecoming dresses

Thanks! I like this method much better than having to label text fields.

http://www.makeawebsitex.com How To Make A Website

I tried it on my squeeze page and it’s working great. The only thing I don’t really like is

onblur=”this.value=!this.value?’Enter Email To Get Updates’:this.value;”

It seems a little “fake” so I don’t really like it but other than that, thanks for your tips!

mangesh5588

Works Great ! Good work!

srinuvas

Thanks for the post. Really liked the idea will include this in my website. Its working superb.
thanks a lot…

http://www.dotsndashes.com Erum Munir

Glad to be able to help

I really find this to be a very useful technique, too. Especially when you want to save space and yet get the message across.

http://www.dotsndashes.com Erum Munir

Glad to hear that.

http://www.andrewhainen.com/blog Ahainen

Perfect. Nice to see a tutorial that works on the first try and I don’t have to spend hours on.

http://www.erummunir.com/ Erum Munir

post

Los Angeles

Very Nice Post. Thanks for share post for us.

http://www.medicalassistantnow.com medical assistant

Very compact, exactly what i was looking for. thanks man!

JC

I looked for about an hour before I found this piece of Gold! Exactly what I wanted without a whole lot of confusing scripting. Thanks a bunch man!

Pafell

Works great!

Thanks for sharing.

Lucky

Thanks god at last I found a function that does that!!! I always founded how to do it in the onfocus/onblur of the input!!

Mark Wilson

Brilliant! Abso-freakin-lutely brilliant. You win 3 Internets!

Janny

Make sure you dont add this to a textarea, if someone is adding content, then decides to click out and naturally click back in to add more text, it will be removed by this function. Only off good use for input boxes

Erum Munir

This has been discussed in the comments below and a solution has also been posted so the text does not get removed when you click out.

Naa

WOW! THIS IS AWESOME. I HAVE BEEN LOOKING FOR THIS PIECE OF DIAMOND FOR SAY A YEAR NOW. I MADE MY OWN BUT THE CODE WAS TOO LONG AND I HAVE ALWAYS HAD THE FEELING THAT SOMEONE OUT THERE HAS A VERY NEAT ONE.

THANK YOU VEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEERY MUCH

Naa

WOW! THIS IS AWESOME. I HAVE BEEN LOOKING FOR THIS PIECE OF DIAMOND FOR SAY A YEAR NOW. I MADE MY OWN BUT THE CODE WAS TOO LONG AND I HAVE ALWAYS HAD THE FEELING THAT SOMEONE OUT THERE HAS A VERY NEAT ONE.

THANK YOU VEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEERY MUCH

http://www.100webhosting.com Jasmine

Nice script. I am using it in my input text box! Thanks for the code.

js

blp

Great. Simple and usefull. Thank you

LukasB

Exactly what I had been looking for! thanks a million!
how would you change the opacity of the input text tho?
does anyone happen to know?!

Adventurebooks2

Thanks a bunch. My input field looks a lot better now.

http://www.shojaru.com Stalin

I’m loving it!

zeeshan

Wonderful Great, Thank you Very much Boss

Datta

it’s great

ivanalbright

How would one do this if the form is inside a PHP script?

My PHP contact form script uses echo to display the and s etc but the following does not erase the message when you click. (Simplified version of what I have is below)

Thanks! This was the best out of every other tutorial I found. The other ones would stay blank if I didn’t enter anything. This was exactly what I was looking for

http://twitter.com/mlwebco Michael Locke

Nice script!…works great.

graemebryson

Thank you (: Worked perfect!

Mebjas

was searching for this code since 4 days…….thnx

Moni

Thanks ,exactly what i was searching for.

Gowentgone

But its also erasing the content evertime it gets clicked. What if a user types a text part, clicks outside, found that he needs to add some more text and clicks again, the whole text will get erased. How can we retain the text of user?

Identitylessinithaca

Looks like changing the onclick to this works:
onclick=”this.value==’TEXT’?this.value=”:this.value==this.value;”
(Where TEXT is whatever your original text was)
There’s probably a more elegant solution (there always is, isn’t there?), but this is what works for me!

http://www.facebook.com/profile.php?id=587870796 Patsy Issa

how would one do it without any inline javascript ?

Vishnu

nice post

junaid

Thanx Erum munir to provide this code
‘

Gopi

Thanks

Mark

thank you it works!

Nbin

thnx.. good idea..it works..

bp

Cool . thank so much.

ThanksALot

As simple as effective, great !
Here’s how I modified it, to keep any user-entered text :

Anonymous

I combined it adding a HTML5 placeholder, thus providing support for those with js turned off (and browsing with a modern browser).

Thank you very much, works great.

Don Don

nice!

Nisha

It works fine. Thank you.

progHmer

Thank you, I love you!

Arild

In PHP it was kinda messy to get all the ” and ‘ to get right

echo ‘ ’.”n”;

Paloma

thanks

http://father.support/ Father support

Cool thanks!

cossacksman

I much prefer to use “this.defaultValue” instead of static text for these scenarios, that way you can use the same code on each element, also to save filesize it’s probably best to stick [ onclick="this.value=(this.value==this.defaultValue?'':this.value);" onfocus="this.select()" onblur="this.value=!this.value?this.defaultValue :this.value;" ] into functions so your inputs can be as simple as []