Question

Hey all. Basically I have a page full of text input fields with default values in them.

When a user focuses on the input, I want the value to be set to nothing, but then if the user focusses out (on blur) and the input is still empty, I want to change its value back to what it was originally.

At the moment I have this, but it isn’t working:

$("#login input").focus(function(){
    $(this).val("");
      $(this).data({
       value: $(this).val()
      });
}); 
$("#login input").focusout(function(){
  if($(this).val()=="") {
   $(this).val($(this).data("value"));
  }
});

What I need is some sort of NOT .change() kind of thing? Maybe?

Thanks in advance

Answer 1

Re-write it a bit (reverse the order in the focus!), like this:

$("#login input").focus(function(){
    $.data(this, "value", $(this).val());
    $(this).val("");
}); 
$("#login input").focusout(function(){
  if($(this).val()=="") {
   $(this).val($.data(this, "value"));
  }
});

The $.data() shortcut is a bit neater and less wasteful (no extra jQuery objects)…but the main problem is you need to swap the order in the focus, you were clearing the value before storing it, so it was being stored as "" every time.