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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    onfocus and onblur on a div with Firefox

    I want to do something like..

    Code:
    <div onfocus="someFunc();">foo</div>
    or even better

    Code:
    document.getElementById('myDiv').addEventListener('focus', someFunc, false);
    From what I've found, div elements should support the focus and blur events, but I've only been able to do this in IE (using attachEvent instead of addEventListener, obviously).

    Any ideas how I can get any kind of focus/blur action for divs working in Firefox? Thanks!

  2. #2
    New Coder
    Join Date
    Jun 2005
    Posts
    52
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Do you mean mouseover and mouseout events?

    I found that blur and focus only works with input controls...

  3. #3
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I guess you may capture the click event and see if the target is or not a certain div. A basic example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    #mydiv{
    width:100px;
    height:100px;
    background:#f00;
    }
    </style>
    <script type="text/javascript">
    function whichDiv(e){
    var div=document.getElementById('mydiv');
    var target=e?e.target:event.srcElement;
    var mess=target==div?'you focused the "mydiv" DIV':'you blured the "mydiv" DIV';
    document.getElementById('mytext').innerHTML=mess;
    }
    document.onclick=whichDiv
    </script>
    </head>
    <body>
    <div id="mydiv">my div</div>
    <div id="mytext"></div>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  4. #4
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    Try


    document.getElementById('myDiv').addEventListener('focus', someFunc, true);


    to hit the event in the capture phase instead of the bubbling phase, this might give the effect you're looking for. But since Divs aren't like certain other html or ui controls that can activate, focus doesn't really apply. Things like the div don't focus because they don't maintain a cursor position or a special state (natively) when you click on it (or if you could -- tab to it). You could be considering maybe that hovering is synonymous with focusing (you could implement this with onmouseover & onmouseout)? If you're actually getting a behavior out of ie with onfocus/onblur, it's probably "quirks mode" and you should look for a more appropriate set of handlers to service your needs.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  5. #5
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Do you mean mouseover and mouseout events?
    Nah, it should retain "focus" even if the mouse no longer hovers over it.

    I guess you may capture the click event and see if the target is or not a certain div. A basic example:
    That's a good idea, I'll keep that in mind, thanks.

    document.getElementById('myDiv').addEventListener('focus', someFunc, true);
    Nope =/

    If you're actually getting a behavior out of ie with onfocus/onblur, it's probably "quirks mode" and you should look for a more appropriate set of handlers to service your needs.
    Nah I have an XHTML strict doctype; works for IE6 and IE7. Again, from this it seems to me that div should support these, so I'm led to believe that Microsoft's got it right and the other browsers have it wrong... which normally doesn't happen.

  6. #6
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    A note: if the DOCTYPE is XHTML, you should isolate the embedded javascript codes in CDATA islands (to avoid XML misinterpretation)
    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    
    ..... code here ...
    
    /*]]>*/
    </script>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  7. #7
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    Nah I have an XHTML strict doctype; works for IE6 and IE7. Again, from this it seems to me that div should support these, so I'm led to believe that Microsoft's got it right and the other browsers have it wrong... which normally doesn't happen.
    Just because XHTML says it's ok for it to be there, doesn't necessarily mean that it would do the thing you want it to. Try another method.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  8. #8
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by mjlorbet View Post
    Try


    document.getElementById('myDiv').addEventListener('focus', someFunc, true);

    Sir, this (addEventListener() method) works on every browser, except IE, who uses attachEvent(). You should have learned that by now. Moreover, the entire way IE handles the events is different from the DOM model. This is it.
    Last edited by Kor; 03-08-2008 at 05:19 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  9. #9
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    just checking, but are you saying i'm right Kor or that i've done something wrong?
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  10. #10
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by mjlorbet View Post
    just checking, but are you saying i'm right Kor or that i've done something wrong?
    I am just saying that you have posted a solution which is not crossbrowser. Like it or not, IE has, so far, over 2/3 of the market, so that we have to know the differences between IE and the others (Moz, Opera, Safari...). My post on #3 takes care of that.
    Last edited by Kor; 03-08-2008 at 07:18 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  11. #11
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    i apologize, i was indicating only a fix for the problem selected and had intended the solution to be "switched" (obj.attachEvent?obj.attachEvent(...)bj.addEventListener(...)) but i did not state it as such for some reason, good call
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  12. #12
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add this to your div element:

    tabindex="0"

  13. #13
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excellent! So simple... tabindex actually solves it.
    Thank you.

  14. #14
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Quote Originally Posted by bf24 View Post
    Add this to your div element:

    tabindex="0"
    Now that makes me think. how does tabindex related to this matter?

    I'm sure there's an interesting explanation to how it solved that problem.

  15. #15
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BarrMan View Post
    Now that makes me think. how does tabindex related to this matter?

    I'm sure there's an interesting explanation to how it solved that problem.
    The tabindex value can allow for some interesting behaviour.

    • If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
    • If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
    • Values greater than 0 create a priority level with 1 being the most important.



    Here is an interesting article:
    http://snook.ca/archives/accessibili...with_tabindex/


 

Posting Permissions

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