Take the 2-minute tour ×

Twitter registration

I'm trying to make some input fields that I would like to work like Twitter's registration form.

  1. On focus the value text becomes light grey.
  2. When you start typing the light grey default value disappears completely and the user-written text becomes #000000.
  3. If you don't write anything and go out of focus the default text appears again.

How to achieve with jQuery?

share|improve this question
What have you tried –  Tim Jun 21 '12 at 12:34
I haven't really got anywhere except for the auto-removal value on focus. $("input#cont_cont\\/email").focus(function () { var defVal = $(this)[0].defaultValue; if($(this).val() == defVal) { $(this).val(''); } }); $("input#cont_cont\\/email").blur(function () { var defVal = $(this)[0].defaultValue; if($(this).val() == '') { $(this).val(defVal); } }); –  estrar Jun 21 '12 at 12:39
If you want Twitter-like, you're better off ditching most of jQuery UI and downloading Twitter Bootstrap. –  Paul Alan Taylor Jun 21 '12 at 12:41

2 Answers 2

up vote 3 down vote accepted

Take a look at this sample.

How to specify some watermark text for a text input element ?

share|improve this answer
Sweet. Is there a live demo other than just the picture? –  estrar Jun 23 '12 at 11:32
next to the pic, there is the html,script&css you can use that –  BalaKrishnan웃 Jun 23 '12 at 11:54

This is a sample way of doing this, making the value of the input set to what you want it to say, and have a label nearby (you can hide it, but have it in the dom) so you can grab its value and add/remove it.

// clear input on focus
    $('input.myclass').focus(function() {
        var inputlabel = $(this).attr('label');
        if($(this).val() == inputlabel) { $(this).val('').removeClass('inactive'); }
    // restore text on blur if blank
    $('input.myclass').blur(function() {
        if($(this).val() == '') { $(this).val(inputlabel).addClass('inactive'); }

You can also use the HTML5 placeholder on the input, ex <input placeholder='Your name' type='text' />, and it will clear the text on focus by default, but it won't work as you expect on all browsers.

share|improve this answer
Do you mean label tag or attribute? your text and code don't fit –  Thomas Jun 21 '12 at 12:54
Also note the placeholder attribute can be polyfilled to work in older browsers. It won't behave exactly as the OP describes, but it's pretty close. –  James Allardice Jun 21 '12 at 20:47

Your Answer


