Question

I’m trying to get my <input.../> fields to go blank on focus, and if on focus out they’re still blank, revert them to their original values.

I would’ve thought this would work, but apparently not:

$('input').focus( function() {
    var init_value = $(this).val();
    $(this).val('');
});

$('input').focusout( function() {
    var new_value = $(this).val();

    if(new_value == "") {
        $(this).val(init_value);
    }
});

Any alterations/advice to get it working would be most appreciated ;)!

Answer 1

You should consider using the HTML5 placeholder attribute as a first option.

http://diveintohtml5.ep.io/forms.html#placeholder

With jQuery, you could modify your original script like this:

$('input').focus(function() {
    $(this).val('');
});

$('input').focusout(function() {
   if($(this).val('')){
       $(this).val('Enter something');  
   }
});

Example: http://jsfiddle.net/jasongennaro/8bJcQ/

EDIT

Here is a revised script to deal with the situation as mentioned in your comment:

As for the jQuery option, that simply wouldn’t do as it needs the
original value= value. I have perhaps 8 different text fields, the
instructions for which are the value, e.g. “Enter your email address”,
“Enter your url”, etc :(.

$('input').each(function(){

    var a = $(this).attr('value');

    $(this).focus(function() {
        $(this).val('');
    });

    $(this).focusout(function() {
       if($(this).val('')){
           $(this).val(a);  
       }
    });

});

Example 2: http://jsfiddle.net/jasongennaro/8bJcQ/3/