CODEWITHSUNDEEP
javascriptjquery
Avicinnian
Avicinnian

Reputation: 1830

If on .focusout form contains no value, revert to original value?

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 ;)!

Upvotes: 2

Views: 2657

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34863

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/

Upvotes: 3

mdcio
mdcio

Reputation: 78

There is an easier method of doing this assuming a modern browser is used. Simply add the attribute placeholder="some text" and the browser will handle all this for you. If you must support older browsers, try this:

var init_value;

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

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

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

Your problem was the scope of init_value. You defined it inside an anonymous function, and could not access that value from a second anonymous function. To fix this you simply need to define init_value outside the scope of each event handler.

Also notice how I used .blur() instead of .focusout(). The jQuery API explains the difference between the two.

Upvotes: 0

Related Questions