1

I am building a registration page. I want to make it like SO does: you see the text "John Smith (optional)" in a field, and when you start typing, the text disappears. How do you do it in JavaScript? (Don't blame me for not trying anything, I'm a JS noob)

Optional: notice that the suggestion is in gray, but typing the text becomes black. I'd like that effect, too.

Giulio Muscarello
  • 1,312
  • 2
  • 12
  • 33
  • Search for `placeholder` in that little search box on the top right. – Sean Bright Sep 26 '12 at 18:42
  • 1
    Possible dupe: http://stackoverflow.com/questions/3446269/javascript-text-input-fields-that-display-instruction-placeholder-text – Patrick M Sep 26 '12 at 18:58
  • @PatrickM: No, because I'm not using jQuery. – Giulio Muscarello Sep 27 '12 at 15:02
  • @GiulioMuscarello Interesting. Is there a js library/framework you are using? (And why/why not?) Doing this flat out from javascript is challenging. The jQuery method in my post below could probably be adapted to not use jQuery, but it would be 4-10 times as long... Is the HTML5 route acceptable to you? Do you need to support older browsers? Can you use modernizr.js? – Patrick M Sep 27 '12 at 15:25
  • @PatrickM I am not using jQuery mostly because right now I use a cloud hosting solution (it's my first website LOL), so I do not have admin rights on the server: so, I cannot install libraries, frameworks, plugins and so on. About HTML5, I just need to support major browsers, with standard options (javascript on). – Giulio Muscarello Sep 27 '12 at 15:42
  • @GiulioMuscarello 2 things: Try out the HTML5 stuff, you'll probably really like it. Javascript libraries are all client side, so you don't need admin rights to 'install' them. Just host the file and stick a `` tag in your html source and it's there. With the popular libraries, there are even other cloud hosted sources to include the libraries from. See: http://stackoverflow.com/questions/1447184/microsoft-cdn-for-jquery-or-google-cdn – Patrick M Sep 27 '12 at 15:50
  • I think I'll go for the HTML5 option, I'll just wait for maybe better answers. – Giulio Muscarello Sep 27 '12 at 15:59
  • @GiulioMuscarello Hmm, you don't "install" jQuery though... it's just a `.js` (JavaScript) file. – Nathan Dec 27 '12 at 06:24
  • @Nathan I know, Patrick already told me. – Giulio Muscarello Dec 27 '12 at 20:04
  • @GiulioMuscarello Oh, sorry, I didn't see that. – Nathan Dec 28 '12 at 01:23

2 Answers2

2

Placeholder demo

<input type="text" name="email" placeholder="E-mail" />

If you want you can also style your placeholder with css

Marcel
  • 1,494
  • 1
  • 23
  • 33
2

Aside from the HTML5 placeholder stuff and all the additional ways to implement this, my favorite way of doing this with javascript (pre-html5) was the following blog post:

http://kyleschaeffer.com/best-practices/input-prompt-text/

What makes this so good is the use of the existing title attribute, which is also a nice to have feature for screen readers (text only browsers, text-to-speech, visually impaired ADA compliance, etc.), if you're not using labels with explicit for and id attribute matching.

However, HTML5 and modernizer have completely pre-empted the need for this feature, in my opinion.

Patrick M
  • 10,547
  • 9
  • 68
  • 101