How do I retain the text of any textbox in jQuery

I have multiple textboxes with the same class ".input". Each textbox has different default text: First Name, Last Name, etc...

On the focus of a particular textbox, I'd like the default text to go away, and a ".focus" class to be added to the textbox. On the blur of that textbox, I'd like the default text to return if no text has been entered by the user. I'd also like the ".focus" class to be removed unless the user has entered text.

I know how to do this for one textbox, but not multiple (without writing a function for each textbox). I'm guessing there is a way.

I'm also working with asp.NET textboxes so I had to modify the selector.

var myText
var myBox
$('input:text.input').focus(function () {
    myText = $(this).val();
    myBox = $(this);
    //alert('focus');
}).blur(function () {
    alert($(myText).val());
});

I'm pretty sure the global vars don't retain their values by the time the blur function is called. I've seen this done many times on multiple sites, I just can't figure it out.

Any help is appreciated. Thanks!

I've searched and com开发者_开发知识库e up with something close... However, when blur is called, the default text goes away even though I've entered in text.

        $('input:text.input').focus(function () {

        if (this.value == this.defaultValue) {
            this.value = '';
        }
        if (this.value != this.defaultValue) {
            this.select();
        }
    });
    $('input:text.input').blur(function () {
        $(this).removeClass("focus");
        if ($.trim(this.value == '')) {
            this.value = (this.defaultValue ? this.defaultValue : '');
        }
    });

Thanks for your help! Here is the code with some tweaks.

    $('input:text.input').focus(function () {
       if($(this).hasClass('focus')) { } else {
         $(this)
           .data('stashed-value', $(this).val()) // stash it
           .addClass('focus')
           .val(''); // clear the box
        }
    }).blur(function () {
       if ($(this).val() != '') { } else {
         $(this)
           .val($(this).data('stashed-value')) // retrieve it
           .removeClass('focus');
        }
});

One way is to stash the value you want to save within the element itself, using data():

$('input:text.input').focus(function () {
    $(this)
      .data('stashed-value', $(this).val() ) // stash it
      .val(''); // clear the box
}).blur(function () {
    // presumably you'll check some conditions here (e.g. input empty) then:
    $(this).val( $(this).data('stashed-value') ); // retrieve it
});

If you are using HTML5, placeholder text will do this for you:

<input name="q" placeholder="Search Bookmarks and History">

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

You can check it out in Chrome or FF.

You can also do this with jQuery

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

$('input').blur(function(){
    if($(this).val() == ''){
        $(this).val('Search')
    }
});

Example: http://jsfiddle.net/jasongennaro/YaXSg/

You could implement a combination of the answers to create a solution that works in HTML5 compliant browsers and gracefully degrades on others.

Html5:

<input type='text' placeholder="First Name" class="input" />
<input type='text' placeholder="Last Name" class="input" />
<input type='text' placeholder="Email" class="input" />

jQuery code for backwards compatibility:

$('input:text.input').each(function (i) {
    $(this).val($(this).attr('placeholder'));
    $(this).focus(function() {
        if ($(this).val() == $(this).attr('placeholder'))
        {
            $(this).val('');
        }
    });
    $(this).blur(function() {
        if (!$(this).val())
        {
            $(this).val($(this).attr('placeholder'));
        }
    });
});