This is my very first implementation.
But it fails on visibility:hidden parent which has a visibility:show child.

You may try the updated demo page. Box 11 would still be visible even when
you toggle its parent's visibility.
http://www.seezone.net/dev/focusField.html

':hidden' selector would try to select both display:none and
visibility:hidden element.
Therefore, we need to only select display:none parent, not
visibility:hidden.

P.S. (I missed 'return' in the previous post)

$(":text:visible:enabled").filter(function(){
       return $(this).filter(function(){
          return this.style.display == "none";
       }).size()==0;
}).eq(0).focus();


2008/4/22 Erik Beeson <[EMAIL PROTECTED]>:

> Your inner $(this).filter(...) doesn't make sense to me. This works for me
> on FF2/Mac:
> $(':input:visible').filter(function() {
>         return $(this).parents(':hidden').length == 0;
> }).slice(0,1).focus();
>
> That is: Select all visible inputs elements, filter out any who have
> parents which are hidden, select the first one of those that remain, focus
> it.
>
> --Erik
>
> 2008/4/21 Jacky See <[EMAIL PROTECTED]>:
>
>
> > Someone found that this method does not handle visibility correctly.
> > When a visibility:hidden parent with a visibility:show child, the
> > child would override its parent's property (of course!).
> > So the script only need to check display:none parent, which would
> > introduce another filter:
> >
> > $(":text:visible:enabled").filter(function(){
> >         return $(this).filter(function(){
> >           this.style.display == "none";
> >        }).size()==0;
> > }).eq(0).focus();
> >
> > On 4月17日, 下午9時40分, Jacky <[EMAIL PROTECTED]> wrote:
> > > To work on any type of input should be easy, just replace ':text' with
> > > input.
> > >
> > > I know that IE would give error when you're focusing a 'disappearing'
> > input.
> > > (parent is hidden, for example). But I do not encounter any error like
> > you
> > > described. Any sample code for  your HTML?
> > >
> > > On Tue, Apr 15, 2008 at 9:00 AM, MichaelEvangelista <
> > [EMAIL PROTECTED]>
> > > wrote:
> > >
> > >
> > >
> > >
> > >
> > > > I've been looking for a solution like this, but that will work with
> > > > any type of form input.
> > > > The code I've been using is below (where form-id is the ID of the
> > > > containing form)
> > >
> > > > It works great in Firefox but IE throws the error
> > > > 'this.parentNode.borderCss.on' is null or not an object
> > >
> > > > I tried your example code above, and got the same error
> > >
> > > > here is what I was using :
> > >
> > > > // ------- Put the cursor in the first field on page load
> > > > var $firstfield = function(){
> > > > $('#form-id input:eq(0)').focus();
> > > > }
> > > > $firstfield();
> > >
> > > > Could this have anything to do with my markup? I didnt get that
> > error
> > > > on your demo, but i did when I applied your code to my form.
> > >
> > > > On Apr 13, 7:54 am, Jacky  See <[EMAIL PROTECTED]> wrote:
> > > > > Hi all,
> > >
> > > > > For focusing first input text field, the usual solution is $
> > > > > (':text:visible:enabled:eq(0)').focus(). However, when these
> > fields
> > > > > are in an ':hidden' parent (not 'visible' by our eyes), it won't
> > work.
> > >
> > > > > Currently I tried to solve this by:
> > >
> > > > > $(":text:visible:enabled").filter(function(){
> > > > >         return $(this).parents(":hidden").size()==0;
> > >
> > > > > }).slice(0,1).focus();
> > >
> > > > > I have setup a test page for this:
> > > >http://www.seezone.net/dev/focusField.html
> > > > > Try to toggle different parent to and click 'focus'. It should
> > work
> > > > > correctly.
> > >
> > > > > I would like to know if there is any other 'selector-based' way to
> > do
> > > > > so?
> > >
> > > --
> > > Best Regards,
> > > Jacky
> > > 網絡暴民http://jacky.seezone.net
> >
>
>


-- 
Best Regards,
Jacky
網絡暴民 http://jacky.seezone.net

Reply via email to