I really like this approach, Scott!
The advantage it has is that it plays nicely with form validation.
Not an
issue with a simple search field, but for larger forms in which
the fields
need to be empty unless user enters text, the other approach could
foil
validating on required fields because those fields would have the
placeholder text.
I wrote a similar plugin for a project at work. With mine, you
select the
input rather than the label. It uses the label text by default,
but it can
also use the input's title attribute or a custom string. The
disadvantage of
mine is that it might require some additional CSS to get the label
to line
up properly.
Anyway, here it is, in case anyone is interested.
(function($) {
$.fn.defaulttext = function(options) {
var elText = {
title: function(input) {
return $(input).attr('title');
},
label: function(input) {
return $('label[for=' + input.id +']').text();
}
};
var defText;
return this.each(function() {
var $input = $(this);
if (this.type === 'text' || this.nodeName.toLowerCase() ===
'textarea')
{
var opts = $.extend({}, $.fn.defaulttext.defaults, options ||
{},
$.metadata ? $input.metadata() : $.meta ? $input.data() : {});
if (opts.dtText.constructor === Function) {
defText = opts.dtText(this);
} else if (opts.dtText && opts.dtText.constructor === String){
defText = (/(title|label)/).test(opts.dtText) ?
elText[opts.dtText](this) : opts.dtText;
}
if (!defText) {return;}
if ($input.parent().css('position') == 'static') {
$input.parent().css({position: 'relative'});
}
$(opts.dtTag).html(defText)
.addClass(opts.dtClass)
.css({
position: 'absolute',
top: $input.position().top,
left: $input.position().left,
display: 'none'
})
.insertBefore($input);
// hide default text on focus
$input.focus(function() {
dtHide($input);
});
$input.prev('.' + opts.dtClass).click(function() {
dtHide($input);
$input.focus();
});
// conditionally show default text on ready and input blur
dtShow($input);
$input.blur(function() {
dtShow($input);
});
}
});
function dtHide(el) {
el.prev().hide();
}
function dtShow(el) {
if ($.trim(el.val()) == '') {
el.prev().show();
}
}
};
$.fn.defaulttext.defaults = {
dtTag: '<span></span>', // this is the element used for the
default text
dtClass: 'default-text', // class applied to the default text
dtText: 'label' // 'label' uses text of input's label;
'title'
uses input's title attribute.
// otherwise, use some other string or
function
};
})(jQuery);
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jul 17, 2008, at 9:24 PM, Scott Sauyet wrote:
Andy Matthews wrote:
Is there a plugin for this by chance? I know it's pretty quick to
write, but
wanted to find out if someone's already done it better than I could.
Also, would toggle() work for this sort of thing? Is there a focus/
blur
toggle in the jQuery core?
Something similar I did some time ago:
http://scott.sauyet.com/thoughts/archives/2007/03/31/overlabel-with-jquery/
(scroll to the bottom for the final version.) This places the
label for a
text field on top of that box but hides it on focus or when there
is actual
content in the field. It's mainly a real-estate saving feature.
-- Scott
