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
