Why doesn't focus() trigger a blur?
I've only just noticed this, but the jQuery focus() method doesn't cause
a blur event to trigger on the previously focused element.
The code below demonstrates.
You need to focus a list item by clicking on it and then using the
up/down arrows to move the focus.
The actual focus is moved as shown by the yellow background from the
li:focus css rule, and the focus event is triggered as shown by the bold
text. But the blur event is not triggered on the previous item.
Clicking on another item will focus and blur as expected.
If you swap the commented lines, blur seems to work:
ie. $(ev.target).prev('li').focus();
to: $(ev.target).prev('li').each(realfocus);
This affects jQuery 1.3 and 1.2.6.
To me this is a slap in the face for the principle of least surprise.
Does jQuery.fn.focus() call .focus() on the element? if not then how is
the refocusing actually happening?
and why isn't blur being triggered?
Regards
- Mark Gibson
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function($) {
function realfocus() { this.focus(); }
$('ul')
.bind('keypress', function(ev) {
if ($(ev.target).is('li')) {
console.log(ev.target);
switch (ev.keyCode) {
case 38: // Up
$(ev.target).prev('li').focus();
//$(ev.target).prev('li').each(realfocus);
break;
case 40: // Down
$(ev.target).next('li').focus();
//$(ev.target).next('li').each(realfocus);
break;
}
}
})
.find('li')
.bind('focus', function() {
$(this).addClass('has-focus'); })
.bind('blur', function() {
$(this).removeClass('has-focus'); })
});
</script>
<style>
li:focus { background-color: yellow; }
li.has-focus { font-weight: bold; }
</style>
</head>
<body>
<ul>
<li tabindex="-1">One</li>
<li tabindex="-1">Two</li>
<li tabindex="-1">Three</li>
<li tabindex="-1">Four</li>
<li tabindex="-1">Five</li>
</ul>
</body>
</html>