IN Code

Clear Text On Input Field On Click

posted Saturday, September 13th, 2008

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.

More Resources

Simple Javascript solutions for your sales pages. (just copy and paste)
Javascript on Crack (copy/paste solutions)

  • http://www.wristwatchmaven.com/sitemap.php Krystine

    Thanks for the post. Really liked the idea will include this in my website. :)

  • http://www.xlwealthdynamics.org/ Roger Hamiltone

    Great post. Thanks for sharing the code.

  • http://www.ascendtraining.com/workshops/adobe-flex-training.php Taylor@Adobe Flex Classes

    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:

    –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–

  • http://www.dotsndashes.com Erum Munir

    Thanks! I’ll check it out!

  • http://www.vegas4sale.net/ Mack@Las Vegas Real Estate

    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.

    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. :P

    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:

    function restoreMe(formfield){
    if (formfield.value == “”){
    formfield.value = formfield.defaultValue;
    }
    };

    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! :D

  • 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)

    echo “Type Here”;

  • http://www.facebook.com/elfynity Wendy Janssen

    thank you!!!!!!!

  • http://www.facebook.com/fredhandl Fred Händl

    Put this in header:

    input.field {
    color:#CCCCCC;
    background-color:#FFFFFF;
    font-size:0.8em;
    font-family:”arial”;
    }

    Then, in your form:

  • Aaa

    Thanks Alot :D

  • http://idrink.dk/ Ipib

    Very nice! Why arent this nr. 1 in google!

  • Afdafsds

    nice

  • LAO Sopheak

    great!

  • Alexander Schulz

    Thanks from Cologne, Germany. Tricky

  • http://www.facebook.com/estevanmontoya Estevan Montoya

    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 :D . 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!

blog comments powered by Disqus