Question

I wonder if someone here can help me figure out this problem.

I need to temporarily disable the code in the ‘onblur’ attribute of an input field, and then re-enable it after. The reason I need to do this is b/c my workflow is as follows:

1) An AJAX event is triggered by the “onblur” attribute of an input field, which resulted from the user tabbing off of the field to go to the next one.
2) The page is updated and my Javascript code is called from the “onafterajax” hook.
3) My code does some serious re-arranging of the DOM, which results in loss of focus on the current input field. So, I must restore focus manually. I’ve attached a focus handler to all input fields, so I can keep track of which field had focus last, so I know where to put the focus.
4) I call .focus() on the correct input field, which for some reason causes ‘onblur‘ to fire on that same input field. This happens in all browsers. This a) suggests that the field still had focus?! and b) Creates an infinite loop, since Step 1 executes again…

In order to avoid the infinite loop, I’ve done the following. Before performing any DOM rearrangements, I do this:

if ( window.currentFocusId ) {
   this.savedFocusId = currentFocusId;

   this.onblur_bak = $(this.savedFocusId).onblur;
   $(this.savedFocusId).onblur = null;
   LOG.warn(" --- Disabling blur on " + this.savedFocusId);
}

Then, after I’ve completed my DOM hackery, I do this:

setFocusAndRestoreBlur : function(req) {
    if ( this.savedFocusId ) {
      var focusElement = req.form.elements[this.savedFocusId];
      LOG.warn(" ------ Focusing on " + focusElement.id);
      if (focusElement) {
        focusElement.focus();
        if (focusElement.select) {
          focusElement.select();
        }
      }

      LOG.warn(" ---  Enabling blur on " + this.savedFocusId);
      $(this.savedFocusId).onblur = this.onblur_bak;

      delete this.onblur_bak;
      delete this.savedFocusId;
    }
}

This works well in all browsers (FF, Chrome, Opera), except for IE6.

In IE6 it kind of works. First of all, in order to make it work in IE at all, I had to modify the call to “setFocusAndRestoreBlur” like so:

setTimeout(function() {
  this.setFocusAndRestoreBlur(req);
}.bind(this), 0)

This has the effect of running the code after the current thread finishes. For some reason IE does not respect the fact that I have removed the onblur handler, if I try to set the focus in the same thread!

So, with this modification, the first time I enter some numbers into a few fields, everything is fine. I get log output that looks like this:

Type something into j_id390 and tab off:

warn[16:35:33,091]: blur fired from statementProgramsDataTable:0:j_id390
warn[16:35:33,092]: --- Disabling blur on statementProgramsDataTable:0:j_id397
warn[16:35:33,225]: ------ Focusing on statementProgramsDataTable:0:j_id397
warn[16:35:33,225]: --- Enabling blur on statementProgramsDataTable:0:j_id397

Type something into j_id397 and tab off:

warn[16:35:38,259]: blur fired from statementProgramsDataTable:0:j_id397
warn[16:35:38,260]: --- Disabling blur on statementProgramsDataTable:0:j_id446
warn[16:35:38,390]: ------ Focusing on statementProgramsDataTable:0:j_id446
warn[16:35:38,390]: --- Enabling blur on statementProgramsDataTable:0:j_id446

However, when I go back to the first input field, overwrite the value and tab off, I get this:

warn[17:18:15,454]: blur fired from statementProgramsDataTable:0:j_id390
warn[17:18:15,469]:  --- Disabling blur on statementProgramsDataTable:0:j_id397
warn[17:18:16,870]:  ------ Focusing on statementProgramsDataTable:0:j_id397
warn[17:18:16,874]:  ---  Enabling blur on statementProgramsDataTable:0:j_id397
warn[17:18:18,097]: blur fired from statementProgramsDataTable:0:j_id397
warn[17:18:18,112]:  --- Disabling blur on statementProgramsDataTable:0:j_id397
warn[17:18:19,550]:  ------ Focusing on statementProgramsDataTable:0:j_id397
warn[17:18:19,555]:  ---  Enabling blur on statementProgramsDataTable:0:j_id397
warn[17:18:24,492]: blur fired from statementProgramsDataTable:0:j_id397 
warn[17:18:24,187]:  --- Disabling blur on statementProgramsDataTable:0:j_id397
warn[17:18:24,531]:  ------ Focusing on statementProgramsDataTable:0:j_id397
warn[17:18:24,545]:  ---  Enabling blur on statementProgramsDataTable:0:j_id397

Most of the time this loop then goes on for a variable number of iterations and then stops with the input field correctly focused. I’ve seen a few times where the loop appeared to be infinite.

It looks like IE is not respecting the absence of the onblur handler again? But only sometimes?!

So, this is where I’m confused. Why is IE behaving inconsistently? What am I doing wrong? Is there a better way?

Any ideas would be appreciated.

Val

EDIT:

I have tried the approach suggested by JeanK. It still does not work, but I learned something potentially useful from this attempt.

I wrap the original ‘onblur’ function with a proxy, like this:

this.allowBlur = false;
if ( !this._functionsEqual($(this.savedFocusId).onblur, this._proxiedBlur) ) {
  $(this.savedFocusId).onblur = this.proxyOnBlur($(this.savedFocusId).onblur);
}

And the proxy function itself:

proxyOnBlur : function(method) {
  var object = this;

  this._proxiedBlur = function(event) {
    if ( object.allowBlur ) {
      return method.apply(this, [event || window.event])
    }
  };

  return this._proxiedBlur;
},

Now, all I have to do is set this.allowBlur as the very last thing, and I should be fine. And herein lies the problem. In all other browsers, the onblur event is fired as I modify the DOM tree, so it correctly gets blocked. But in IE6, no matter what I do, it fires the onblur event after all of my code. I even tried this:

setTimeout(function() {
  this.allowBlur = true;
}.bind(this), 2)

and my this._proxiedBlur still gets called after I set the flag to true!

So, the question becomes – Where do I need to put my flag reset so that it executes after IE6 reacts to the DOM changes?

Answer 1

ok, I figured it out. The trick was to set the focus in the separate thread:

                setTimeout(function() {
                    this.setFocusAndRestoreBlur(req);
                }.bind(this), 0)

and then reset the flag with another nested setTimeout(). This seems to sequence the events properly in IE6:

setFocusAndRestoreBlur : function(req) {
  setFocus(req);

  setTimeout(function() {
    this.allowBlur = true;
  }.bind(this), 0)
}