I mean, what the hell, at least 6 plugins for such a basic feature?? Jörn
On Fri, Jul 18, 2008 at 5:56 PM, Jörn Zaefferer <[EMAIL PROTECTED]> wrote: > 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 >> >> >
