jQuery - How to make the input values ("email", "password") reappear when out of focus?

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" /开发者_C百科>

Thanks.

---

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...

---

You should really consider doing this better, even using placeholder attribute, but...

$('.login-user, .login-pass').each(function() {

    var input = $(this);

    input.focus(function() {

        if ($.trim(input.val()) != this.defaultValue) {
            return;
        }

        input.val('');
    });

    input.blur(function() {

        if ($.trim(input.val()) != '') {
            return;
        }

        input.val(this.defaultValue);
    });

});

jsFiddle.

...will fix the issue you are having.

---

 $('.login-user').blur(function() {
        if(this.value.length == 0)
          {
             this.value = "Username"
          }
      });

This might be able to be improved, if so please let me know.

---

Complete solution which resolves most of the problems of your task:

$('.login-user, .login-pass').focus(function() {
    var $this = $(this);
    if (!$this.data('defaultValue') || $this.data('defaultValue') == $this.val()) {
        if (!$this.data('defaultValue')) {
            $this.data('defaultValue', $this.val());
        }
        $(this).val('');
    }
}).blur(function(){
    var $this = $(this);
    if ($this.val().length === 0) {
        $this.val($this.data('defaultValue'));
    }
});

---

Use title attributes for default values, then with a little plugin you can achieve what you want.

HTML

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

JavaScript

(function(a){a.fn.extend({defaultVal:function(){return this.each(function(){var c;var b=a(this);c=b.attr("title");if(b.val()==""){b.val(c)}b.attr("title","");b.focus(function(){var d=a(this);if(d.val()==c){d.val("")}}).blur(function(){var d=a(this);if(d.val()==""){d.val(c)}})})}})})(jQuery);

$('.login-user,.login-pass').defaultVal();

And this is live example

Here decompressed version of my little defaultVal plugin (for learning purposes) ;)

(function ($) {
  $.fn.extend({
    defaultVal: function () {
      return this.each(function () {
        var defaultValue;
        var $this = $(this);
        defaultValue = $this.attr("title");
        if ($this.val() == "") {
          $this.val(defaultValue);
        }
        $this.attr("title", "");
        $this.focus(function () {
          var $that = $(this);
          if ($that.val() == defaultValue) {
            $that.val("");
          }
        }).blur(function () {
          var $that = $(this);
          if ($that.val() == "") {
            $that.val(defaultValue);
          }
        });
      });
    }
  });
})(jQuery);