Form input loses focus on scroll bar click in IE

Question

I hope someone can help me. I know this has been discussed here before but the example is prototype and foreign to me. I'm looking for a strict javascript or jquery solution. I have an example setup here. Click on the scrollbar in FF and you don't get an alert but click on it in IE and you do. Please help me, thanks!

Answer 1

After some searching I came up with this answer. From the best of my knowledge, you cannot actually cancel the blur event, nor can you call the focus event at the same time. This is what I don't get .. you can blur on focus but you cannot focus on blur .. Anyway my solution is use the setTimeout function to call the focus event 1ms after the focus was lost.

var o = this;
oTimeout = setTimeout(function(){
    o.focus();
},1);

Using mouseenter and mouseleave events, I set a boolean to refer to on blur event

$("div#box").mouseenter(function(){
    changeFocus(1);
}).mouseleave(function(){
    changeFocus(0);
});

Answer 2

I've had the same problem and this works for what need it to do. Just force the focus back on the element.

$('#divWithScrollBar').scroll(
    function () {
        $('#elementThatLosesFocus').focus();
    });

That event is somehow triggered after the element is blurred, but before the onblur event is kicked in. Haven't really looked in to it, but that's what seems to be going on.

The scroll does appear a bit slow, but it works.

IE owes me many hours of my life back.