Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onfocus bubble problem, and finding related blur element (Firefox)

    I have a div which is able to take the focus, as it has a tabindex. When clicked on, a focus event fires, and when something else is clicked, a blur event fires. All fine and dandy so far.

    Now, I have a text box inside the div. When the text box is selected, the div loses the focus, and the blur event fires. The trouble is, I want the div to think it still has the focus, so long as anything inside that div has the focus.

    So, my first thought is that focus and blur are supposed to bubble in Firefox, which means the focus event should buble from the text box to the parent div - right? Nope. It doesn't seem to get there. I'm not doing anything to stop it, either, as far as I know...

    My second idea was to detect where the focus is going to, when a blur event happens, and check if that object is a descendant of my div. But it seems that the event object doesn't contain this information.

    So... the question is, how can I let my div know when to let go of the focus? (It goes partly transparent when blurred, and fully opaque when focused, so you can see the problem if a child text box is being typed into and the div thinks it has lost the focus...)

    (I should probably mention that I am using the activate and deactivate events in IE, which seem to bubble fine and so I am not experiencing the problem there. Hence this is a Firefox question.)
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't figure out why this isn't working. Focus bubbles in Firefox - right? (well, I can bubble focus up through divs with no problem.) I'm just not picking up a focus event in a parent div when a textbox receives the focus, no matter what I do...

    Ideas, anyone?
    Last edited by krycek; 09-01-2006 at 01:29 AM.
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    DOM2 HTML specifies that focus and blur events do not bubble. However, DOMFocusIn, DOMFocusOut, and DOMActivate events do bubble (those are defined as part of the DOM2 User Interface event module) - http://www.w3.org/TR/2000/REC-DOM-Le...pings-uievents .

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That would be great... except that Firefox doesn't seem to know about DOMFocusIn and DOMFocusOut. At least, they don't do anything when I change my focus and blur listeners to them.

    Now, I know focus and blur are not *supposed* to bubble - but we all know that in Firefox, they *do*. At least, they do for divs. Textboxes seem to be a different matter.

    So... in IE I can use the activate and deactivate events (which act like focus and blur, and bubble just fine). In Firefox I can use focus and blur to get bubbling through basic elements. The DOM2 stuff says that I can use DOMFocusIn and DOMFocusOut to do the bubbling stuff for everything. Except that doesn't work.

    So how do I get focus bubbling from a textbox?
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #5
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why don't you check from in the <input> element's onfocus event handler to see if an ancestor of that <input> has a tabIndex defined?
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I could do that, and I could also run backwards up the tree checking for onfocus handlers... but that would mean adding focus handlers to all input elements.

    I've tried to do that automatically, by extending the HTMLElement object, but it doesn't work.

    I definitely don't have the option of manually putting handlers onto the text boxes. The point is that the behaviour should be automatic - so if that means adding a global handler to do the checking, that's fair enough, so long as it actually works...

    I've so far spent about three days on this one issue, including about 8 hours straight right now. Suffice to say that it's doing my head in!
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #7
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Via the onload event you could call document.getElementsByTagName('input') and then add the onfocus event to the <input>s that you care about.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    heheh, you just beat me to posting... I've just in the past couple of hours managed to get it working by doing just that. I'm using a combination of an onload procedure that finds all inputs and attaches the event handlers - just as you have just now suggested - and also a modified document.createElement function, so that new input elements will also have the handlers attached.

    Sometimes I just hate web development. Inconsistencies... bah!

    Thanks for the suggestion tho - it was the way I went in the end
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •