Label inside input

We've created a small plugin for jquery that moves the text from an inputs label, into the input itself. Once a user clicks within the input, the label text disappears ready for keyboard strokes. This is a common function that many websites use including the search box on this website.

(function($) { $.fn.extend({ labelToInput: function() { return this.each(function() { var id = $(this).attr('id'); $('label').each(function() { if ($(this).attr('for') == id) { $(this).css('display', 'none'); if ($('#' + id).val() == '') { $('#' + id).val($(this).html()); } } }); $(this).focus(function() { $('label').each(function() { if ($(this).attr('for') == id) { if ($(this).html() == $('#' + id).val()) { $('#' + id).val(''); } } }); }); $(this).blur(function() { var id = $(this).attr('id'); if ($(this).val() == '') { $('label').each(function() { if ($(this).attr('for') == id) { $('#' + id).val($(this).html()); } }); } }); }); } }); })(jQuery);

To initiate, just call the above code as follows:

$('#name').labelToInput(); $('#email').labelToInput(); $('#search_box').labelToInput();

Easy.