IE引起文本框焦点模糊

Question

First of all, this is my first question here, sorry if it is not asked properly. I have a bug in a web app we developed in the office. The app is nearly done but In IE < 9 it happens that a text-box which has focus and blur events attached with jQuery raises the blur event as soon as you click on it. You can see this in this picture (just clicked in the text-box):

https://www.dropbox.com/s/yn10xfrfxsr38bq/screen.PNG

$('#divVolee [type="text"]') 

has no focusin or focus events attached.

The URL to the application:

http://86.126.255.70:2213/Anoxa/

If you want you can enter using the "Demarrer" button.

I do not ask anybody to write code for me or anything like that, I just don't know after days of searching in the code and on the net what could cause that.

I tried focusin, focus, focusout, blur, attaching directly or using delegates, the same thing. As soon as I click in the input field it raises the blur / focusout event.

Thank you for your help.

Answer 1

I found it. I started to comment everything out until I found the culprit:

function resizeAccordion() {
    var active = $('#divAccordion').accordion('option', 'active');
    $('#divAccordion').accordion('destroy').accordion({ heightStyle: "fill", active:   active });
}

 var resizeId;
 $(window).resize(function () {
     clearTimeout(resizeId);
     resizeId = setTimeout(resizeAccordion, 600);
 });

This code was supposed to re-size and re arrange the accordion in the page if the user re-sized the browser. Somehow in IE<9 it got triggered without reason and this caused the blur event to be triggered. After so many hours. Maybe it is may thinking or code that was wrong, but i still hate IE for it.

Answer 2

I cannot reproduce this bug (using IE8 mode under IE9). But a simple workaround could be: (even quite weird)

$('#divVolee [type="text"]').focus(function(){
    //>>code for FOCUS here<<
    $(this).blur(blurcallback);
});

function blurcallback()
{
  //>>code for BLUR here<<
  $(this).off('blur');
}