What is it called when text appears in an input box (and disappears when you click it)?

by Thomas
5 replies
  • WEB DESIGN
  • |
Hello Warriors,

I know the code for doing this is probably readily available via a simple Google search but I don't even know what it's called, so can't search: How do you make text appear in an input box (which is erased by the user to put their own text in).

This is something you often see on squeeze pages where the box you put your e-mail in already has (slightly greyed) text in it that says "Enter e-mail address here" (or something along those lines). That text usually (though not always) disappears when you click in the box to enter your e-mail.

Can anyone tell me what that is?

Thanks,
Tommy.
#appears #box #called #click #disappears #input #text
  • Profile picture of the author Shounak Gupte
    javascript.

    Code:
    function cleartext()
    {
         document.getElementById(email).value="";
    }
    
    <input type=text id=email value="Enter email address"  onclick="cleartext()"/>
    Signature
    Looking for a quality but affordable graphic designer to partner with. To express your interest PM me with some samples.
    {{ DiscussionBoard.errors[2183849].message }}
  • Profile picture of the author shaunseq
    Yeah it is a javascript file. the main coding is onclick="cleartext()"
    {{ DiscussionBoard.errors[2184035].message }}
  • Profile picture of the author JonathanKrantz
    You should definately use onfocus because sometimes people don't click on your inputs, they press the tab key to get to them..

    with jQuery it would look something like this

    Code:
    <input type="text" value="Your name" onfocus="if ($(this).val()=='Your name') { $(this).val(''); }" onblur="if ().val()=='') { $(this).val('Your name'); }" />
    This will make it so that when you click on an input all text will be deleted and if you click out of this input and the input is empty the default text will appear on it again.
    {{ DiscussionBoard.errors[2184611].message }}
    • Profile picture of the author DropThePhone
      Originally Posted by JonathanKrantz View Post

      You should definately use onfocus because sometimes people don't click on your inputs, they press the tab key to get to them..

      with jQuery it would look something like this

      Code:
      <input type="text" value="Your name" onfocus="if ($(this).val()=='Your name') { $(this).val(''); }" onblur="if ().val()=='') { $(this).val('Your name'); }" />
      This will make it so that when you click on an input all text will be deleted and if you click out of this input and the input is empty the default text will appear on it again.
      Hi all, I was looking exactly for this code and I found it. I have installed it on my website dropthephone.co.uk but when you click out the text doesn't re-appear.

      Any Solution?

      Thanks in advance
      {{ DiscussionBoard.errors[2247431].message }}
  • Profile picture of the author infibook
    the key term for your problem is here ----
    use this as your key...
    onclick="cleartext()"
    {{ DiscussionBoard.errors[2187781].message }}

Trending Topics