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.
