onfocus and onblur on a div with Firefox

Tinister · 03-06-2008, 11:09 PM

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!

Zefris · 03-07-2008, 07:45 AM

Do you mean mouseover and mouseout events?

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

Kor · 03-07-2008, 08:24 AM

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>

mjlorbet · 03-07-2008, 08:47 AM

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.

Tinister · 03-07-2008, 02:54 PM

Quote:

Do you mean mouseover and mouseout events?

Nah, it should retain "focus" even if the mouse no longer hovers over it.

Quote:

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.

Quote:

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

Nope =/

Quote:

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.

Kor · 03-07-2008, 02:59 PM

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>

mjlorbet · 03-08-2008, 02:15 AM

Quote:

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.

Kor · 03-08-2008, 04:13 PM

Quote:

Originally Posted by mjlorbet

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.

mjlorbet · 03-08-2008, 04:36 PM

just checking, but are you saying i'm right Kor or that i've done something wrong?

Kor · 03-08-2008, 06:16 PM

Quote:

Originally Posted by mjlorbet

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.

mjlorbet · 03-09-2008, 01:59 AM

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

bf24 · 03-09-2008, 04:15 AM

Add this to your div element:

tabindex="0"

dnagroove · 04-29-2008, 12:10 PM

Excellent! So simple... tabindex actually solves it.
Thank you.

BarrMan · 04-29-2008, 02:18 PM

Quote:

Originally Posted by bf24

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.

bf24 · 09-10-2008, 06:54 PM

Quote:

Originally Posted by BarrMan

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/

03-06-2008, 11:09 PM	PM User \| #1
Tinister 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!

03-07-2008, 08:47 AM	PM User \| #4
mjlorbet Regular Coder 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

03-07-2008, 02:59 PM	PM User \| #6
Kor Red Devil Mod Join Date: Apr 2003 Location: Bucharest, ROMANIA Posts: 6,842 Thanks: 49 Thanked 219 Times in 215 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 -----------------*

03-08-2008, 04:36 PM	PM User \| #9
mjlorbet Regular Coder 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

03-09-2008, 01:59 AM	PM User \| #11
mjlorbet Regular Coder 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

03-07-2008, 07:45 AM	PM User \| #2
Zefris New Coder Join Date: Jun 2005 Posts: 27 Thanks: 0 Thanked 2 Times in 2 Posts	Do you mean mouseover and mouseout events? I found that blur and focus only works with input controls...

03-09-2008, 04:15 AM	PM User \| #12
bf24 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"

04-29-2008, 12:10 PM	PM User \| #13
dnagroove 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.

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread: