Cross-browser div focus and blur

2009-01-11 – 7:28am

Internet Explorer has for some time supported giving ‘focus’ to non-focussable elements such as divs. Firefox, by contrast, does not. Whilst this makes sense semantically, it’s often still very useful to use these triggers. For example, you can use onfocus to show a popup when a div is clicked, and close the popup when anything else is clicked on the page (in the onblur event).

There are many, many workarounds which provide this functionality, using such tricks as hidden input elements, global onclick handlers, and so on, but the simplest is simply this: give your div a tabIndex attribute. For example,

<div tabindex="-1" onfocus="document.getElementById('monkey').style.display='block'" onblur="document.getElementById('monkey').style.display='none'">Click to show another div.</div>
<div id="monkey" style="display:none;">Click elsewhere to hide this div.</div>

works perfectly in Firefox, Internet Explorer, and Chrome as shown in the example below:

Click to show another div.

The value of tabIndex can have significance, too:

  • -1: The user can’t tab to the element, but it can be given focus programmatically (element.focus()) or by being clicked on.
  • 0: The user can tab to the element, and its order in the tabbing is automatically determined.
  • >0: Give the element a priority, with ’1′ being the highest priority.

I originally discovered this technique on this CodingForums.com thread.

Supporting browsers:
  • Firefox
  • Internet Explorer
  • Google Chrome
Non-supporting browsers:
  • Safari
Tags: , , , , , , , ,
Posted in HTML, Javascript, Programming
5 comments
Josh Habdas
2009-03-12 – 5:19 pm

Thanks for the idea. Only problem is that tabindex is not a valid attribute of the DIV element as per the HTML 4 spec: http://www.w3.org/TR/REC-html40/index/attributes.html.

Barry van Oudtshoorn
2009-03-13 – 11:16 am

You’re right, Josh. This is, unfortunately, a hack more than it is the ‘correct’ way of doing things. But it works nevertheless. :)

bluerouse
2009-10-15 – 10:25 pm

Nice approach!
But: Whats to do if you got a link in the ‘monkey’-Div? You can’t click it, because the Blur-Event is before the Click-Event…

You got an idea?

Barry van Oudtshoorn
2009-10-16 – 9:10 am

@bluerouse: In that case, you’re probably better off using Javascript that doesn’t rely on the ‘focus’ and ‘blur’ events.

A MooTools snippet that adds the ‘outerClick’ event to elements is here: http://blog.kassens.net/outerclick-event .

Using this, you could rewrite the example like this — note that, as I tend to nowadays, I’ll just create the elements in JavaScript:

$(document.body).adopt(
	new Element('div').addEvents(
		'outerClick': function() {
			$('monkey').setStyle('display', 'none');
		},
		'click': function() {
			$('monkey').setStyle('display', 'block');
		}
	),
	new Element('div', {
		'id': 'monkey',
		'styles': {
			'display': 'none'
		}
	})
)
Andrei Nemeti
2010-04-12 – 4:50 pm

Thanks. Helped with my simple task.
Josh Habdas is right. It won’t validate, but as long as we have to hack IE, let’s just assume it’s valid :)

Add your voice

Spam protection by WP Captcha-Free