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

   $('.myclass').each(function() {
    var default_value = this.value;
    $(this).css('color', '#666'); // this could be in the style sheet instead
    $(this).focus(function() {
        if(this.value == default_value) {
            this.value = '';
            $(this).css('color', '#333');
        }
    });
    $(this).blur(function() {
        if(this.value == '') {
            $(this).css('color', '#666');
            this.value = default_value;
        }
    });
});
<input type="text" class="myclass" size="30" value="type here" />

Answer 2

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: <input ... value="defaultValue" ... >

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.

Answer 3

This is working! I use it myself:

/* Forminputs löschen und wiederherstellen */
jQuery(function() {
    var input = jQuery('#userForm input[type=text], #userForm textarea');

    input.focus(function() {

        jQuery(this).attr('data-default', jQuery(this).val());
        jQuery(this).val('');

    }).blur(function() {
        var el = jQuery(this);

        if (el.val() == '')
            el.val(el.attr('data-default'));
    });
});

Answer 4

$(function() {
    var input = $('input[type=text]');

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

         /* use the elements title attribute to store the 
            default text - or the new HTML5 standard of using
            the 'data-' prefix i.e.: data-default="some default" */
         if(el.val() == '')
             el.val(el.attr('title'));
    });
 });

---

Update

Browsers are progressively implementing the placeholder attribute, which provides the ability to display a "hint" to the user.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

Answer 5

Simpl write $(this).val(defaultText): without the ''s else it wont treat it as a variable.

Answer 6

Try this in your firebug:

$(function() { console.log($(this)) });

You will find out that

var defaultText = $(this).val();

is probably not what you want.

If initial value for the input is the default text, obtain it like this:

var defaultText = $('input[type=text]').val()

Be aware, that this will work correctly only if there is just one input text on your page.

And also remove quotes in:

$(this).val('defaultText');