Another one, with, despite its name, support for password fields (by cloning the field and displaying a normal input while not focused):
Demo: http://dev.jquery.com/view/trunk/plugins/searchField/ Source: http://dev.jquery.com/view/trunk/plugins/searchField/jquery.searchField.js Usage: $("input").searchField(); //uses the title attribute $("input").searchField("Label"); // uses the given label I'd like to gather all these various implementations under the umbrella of jQuery UI forms, into one watermark/whatever plugin, together with at least the form and validation plugins... Jörn On Fri, Jul 18, 2008 at 3:10 PM, Karl Swedberg <[EMAIL PROTECTED]> wrote: > 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 > >
