css/javascript form onfocus placeholder text still there, on typing disappear

I'm just trying to figure out how to make a form like ww开发者_Python百科w.tumblr.com. onFocus the placeholder remains in the input box, but when typing begins the placeholder text disappers. I know how to do the onFocus through another tutorial found here, but I was wondering how they keep that background text onFocus but only change it on typing.

---

They aren't using the onFocus trick to change the text. They are, in fact, layering two absolutely positioned block elements within a separate relatively positioned block element.

Then, they wait for onKeyUp or some similar event, and hide the "label" element.

If you use Firebug in Firefox, it's trivial to see the nodes and CSS that create the effect. It looks something like this:

HTML

<div class="input_wrapper">
    <label for="user_email">Email</label>
    <input type="text" id="user_email" name="user_email" />
</div>

CSS

.input_wrapper {
    position: relative;
}
.input_wrapper label {
    position: absolute;
    top: 2px;
    left: 5px;
    z-index: 1; /* stack below input */
}
.input_wrapper_focused label {
    /* style label for focused input */
}
.input_wrapper_notempty label {
    visibility: hidden;
}
.input_wrapper input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* stack above input */
}

You'll need to style and tweak these elements to make them look pretty. Also, note that they were smart enough to put the label first - so that screen readers still see the content in the correct order.

Then you need to add the JS to add and remove the input_wrapper_focus/notempty classes on change and keyUp for the input field, which depends on your JavaScript library or non-library decisions.