Question

When I click inside the input fields the values “Email” and “password” disappear which is what I want. But if the user doesn’t enter his email/pass and clicks somewhere else, I want “Email” and “Password” to reappear.

jQuery:

$('.login-user, .login-pass').focus(function() {
    $(this).val("");
  });

Html:

<input type="text" name="user" value="Email" tabindex="1" class="login-user" />
<input type="password" name="password" value="Password" tabindex="2" class="login-pass" />

Thanks.

Answer 1

Update:

I finally got around to doing a dead-simple plugin for supporting the placeholder attribute on browsers that don’t do it natively. Been planning to for a long time, and I have a project that needs it, so… place5 (the plugin) auto-detects native support and leaves things alone (by default) on browsers that can do the job themselves (although you can override that if you really want to use the plugin instead).

---

Original answer:

I’d probably do it as a plug-in I could reuse, but basically, since you’re dealing only with inputelements, it can be quite simple:

$(".login-user, .login-pass").each(function() {
    $(this)
        .focus(function() {
            if (this.value.length === this.defaultValue) {
                this.value = "";
            }
        })
        .blur(function() {
            if (this.value.length === 0) {
                this.value = this.defaultValue;
            }
        });
});

That uses the defaultValue of the input element to set the value if the value is blank when the user leaves the field, and to clear the value when the user enters the field if it’s the default value. This assumes you use value="placeholder to show" in your markup.

A more thorough solution would use the new placeholder attribute and use feature-detection to see whether it was supported (which it sadly isn’t in IE, and even in Firefox 3.6 but I bet 4.0 has it). I keep meaning to do something up…