Comments on: Cross-browser div focus and blur

By: Mohsen

Mohsen — Wed, 03 Aug 2011 05:26:24 +0000

Awsome!!
It saved me. I do it by Prototype and it works great.
Thanks.

By: caolvchong

caolvchong — Fri, 03 Sep 2010 02:00:27 +0000

Thanks. Safari also support tabIndex on my PC.
Safari version:4.0.3, Windows XP.

By: Andrei Nemeti

Andrei Nemeti — Mon, 12 Apr 2010 07:50:16 +0000

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

By: Barry van Oudtshoorn

Barry van Oudtshoorn — Fri, 16 Oct 2009 00:10:13 +0000

@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'
		}
	})
)

By: bluerouse

bluerouse — Thu, 15 Oct 2009 13:25:57 +0000

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?

By: Barry van Oudtshoorn

Barry van Oudtshoorn — Fri, 13 Mar 2009 02:16:10 +0000

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

By: Josh Habdas

Josh Habdas — Thu, 12 Mar 2009 08:19:52 +0000

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.