No need for the wrapper - I'm using offsetParent, offsetLeft and offsetTop, so these coordinates are always right for the input. I'll soon create a class for this, but it would have a position method so if you reposition your input you can call it to reposition the labels as well.
On Tue, Nov 22, 2011 at 5:13 PM, Olmo Maldonado <[email protected]>wrote: > Yep no worries. > > Great fiddle. I wonder if you'll run into positioning problems at some > point. > > What I like to do is: > > <div id="wrapper"> > <input/> > <span class="placeholder"> > </div> > > #wrapper { > position: relative; > } > > #wrapper span.placeholder { > position: absolute; > top: 0; > left: 0; > } > > This way the wrapper creates a new coordinate space which then the > placeholder can use. Other then that, you're just missing a class and an > observer pattern for new instances of placeholders (say added via > set('html')). > > I think Aaron has a pattern for behaviors. > > > > On Tue, Nov 22, 2011 at 5:52 AM, Arieh Glazer <[email protected]>wrote: > >> something like this: >> http://jsfiddle.net/mHzLw/2/ >> (very raw but would work quite nicely once styled properly) >> >> >> On Tue, Nov 22, 2011 at 1:39 PM, Arieh Glazer <[email protected]>wrote: >> >>> Olmo - point taken - I tend to forget that email is really bad at >>> conveying intonation. I didn't mean to flame, though re-reading my post I >>> see it might have been a bit too aggressive. >>> I will say though, that by now I expect code that is published for >>> wide-use to be in a higher standard. People rarely take a look into the >>> code of their libraries, especially if the seem to work. >>> I also agree with Aaron's point- you can't expect the user (as in the >>> developer not the end-user) to know how he's code will be used. >>> In the past, when I created something like that I used a span that was >>> hidden under the input (input had transparent bg-color / opacity I think). >>> That way it will also play nice with assistive technologies. >>> >>> >>> On Mon, Nov 21, 2011 at 9:59 PM, Aaron Newton <[email protected]> wrote: >>> >>>> My problem with this method has always been the potential for form data >>>> pollution. Element.toQueryString and regular from submissions can send that >>>> placeholder data to the server. Yes, JS can remove this stuff on submit, >>>> but it's still error prone IMHO. >>>> >>>> >>>> >>>> On Nov 21, 2011, at 8:01 AM, Olmo Maldonado <[email protected]> >>>> wrote: >>>> >>>> Perhaps toning down the criticism to a few pointers on how to improve >>>> style and code might be even more constructive. >>>> >>>> For example your points could be rephrased: >>>> >>>> Instead of using getElementsByTagName('*') you should use $$('input, >>>> textarea'). >>>> >>>> >>>> On Mon, Nov 21, 2011 at 9:00 AM, Arieh Glazer >>>> <[email protected]>wrote: >>>> >>>>> Nicer solutions - http://mootools.net/forge/p/mootools_placeholder >>>>> >>>>> >>>>> On Mon, Nov 21, 2011 at 4:53 PM, Arieh Glazer >>>>> <[email protected]>wrote: >>>>> >>>>>> This is far from a good implementation (at least the vanilla >>>>>> implementation) - eg- it has the following bit: >>>>>> >>>>>> var elems = document.getElementsByTagName("*"), >>>>>> n = elems.length; >>>>>> for(var i=0;i<n;i++){ >>>>>> if(elems[i].nodeName.toLowerCase() == 'input' || elems >>>>>> [i].nodeName.toLowerCase() == 'textarea') { >>>>>> >>>>>> >>>>>> now - that's plain wrong (eg solution = >>>>>> getElementsByTagName('input'), getElementsByTagName('textarea') - send >>>>>> both >>>>>> to an iterate function. >>>>>> >>>>>> Also - it lacks support for styling, since it simply replaces the >>>>>> value >>>>>> >>>>>> >>>>>> On Mon, Nov 21, 2011 at 4:16 PM, Adrian Statescu < >>>>>> [email protected]> wrote: >>>>>> >>>>>>> Brings HTML5 placeholder attribute into all modern browsers. >>>>>>> >>>>>>> Check this out: https://github.com/thinkphp/placeholder.js >>>>>>> >>>>>>> cheers! >>>>>>> >>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> Arieh Glazer >>>>>> אריה גלזר >>>>>> 052-5348-561 >>>>>> http://www.arieh.co.il >>>>>> http://www.link-wd.co.il >>>>>> >>>>>> >>>>> >>>>> >>>>> -- >>>>> Arieh Glazer >>>>> אריה גלזר >>>>> 052-5348-561 >>>>> http://www.arieh.co.il >>>>> http://www.link-wd.co.il >>>>> >>>>> >>>> >>> >>> >>> -- >>> Arieh Glazer >>> אריה גלזר >>> 052-5348-561 >>> http://www.arieh.co.il >>> http://www.link-wd.co.il >>> >>> >> >> >> -- >> Arieh Glazer >> אריה גלזר >> 052-5348-561 >> http://www.arieh.co.il >> http://www.link-wd.co.il >> >> > -- Arieh Glazer אריה גלזר 052-5348-561 http://www.arieh.co.il http://www.link-wd.co.il
