jQuery: Clear / Return Textbox Value

Here’s a little jquery file that clears out a textbox’s value onFocus and returns it onBlur if it did not change.
‘Tis really handy for developing for mobile devices.

All you need to do is give the textbox a class of “tbxreq” if you don’t want the value to return at all use the class “tbx”
e.g.

<input id="tbx_username" type="text" name="username" value="Username" class="tbxreq" />
<input id="tbx_password" type="text" name="password" value="Password" class="tbx" />

$(function () {
    $('.tbxreq').focus(function () {
        var orgval = $(this).val();
        $(this).val('');
        $(this).blur(function () {
            if ($(this).val().trim() == '') {
                $(this).val(orgval);
            } else {
                orgval = $(this).val();
            }
        });
    });

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

Categorised in: jQuery

This post was written by admin