Clear input on focus with jQuery and return on blur

Question

This almost works. However, when leaving the field \"defaulttext\" appears rather than the original text value. Not sure how to most efficiently echo the variable inside default

Answer 1

This solution requires jQuery!

I wrapped this functionality up in a utils module like so:

var utils = (function () {
    var utils = {};
    //some other properties...
    utils.setupAutoclearInputs = function() {
        $('.input-autoclear').each(function() {
            $(this).data('default', $(this).val()).addClass('gray');
        }).focus(function(e) {
            if (!($(this).val() !== $(this).data('default'))) {
                $(this).removeClass('gray').addClass('black').data('modified', true).val('');
            }
        }).blur(function(e) {
            if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') {
                $(this).removeClass('black').addClass('gray').val($(this).data('default'));
            }
        });
    }
    //some other methods...
    return utils;
}());

In the HTML:

Add: class="input-autoclear" to each input you wish to be included.

Set the default value:

Create some css classes for gray and black text or whatever you want.

Personally I'm using .gray { ... } and .black { ... } but you might want better names.

Finally:

Fire the utils modules method using:

$(document).ready(function() {
    ...
    utils.setupAutoclearInputs();
    ...
}

Make sure the code for the module lives outside the document.ready call and you will probably want it in the global scope of your application.

For more on proper javascript module writing, visit this article.