form input focus in/out

dana picture dana · Jul 1, 2011 · Viewed 6.9k times · Source

i have some login forms, and if one sets its email to be remembered, it will be pre filled in the email input. i want that, if one clicks on the email input, the content (the actual email) to fade, but if he clicks out, the email to show again. but i just managed to make the email fade out,i don;t know hot to restore the old value on focus out. the code:

         $(document).ready(function () {
         $('input').focus(function() {
         $(this).val("");
         });
         $('input').focusout(function() {
         $(this).val();
   });
   });

any idea about what should be the value of focus out so that the old remembered value (the email) to appear there?

thanks!

Answer

Arvid Janson picture Arvid Janson · Jul 1, 2011

I usually save the "default" value in the title attribute of the field, so that it can easily retrieved on blur:

$('.placeholder').live('focus', function() {
    if ( $(this).val() == $(this).attr('title') ) $(this).val('');
});
$('.placeholder').live('blur', function() {
    if ( $(this).val() == '' ) $(this).val($(this).attr('title'));
});