Form focus (getting it, not setting!)

[Innova]

Is there a way to find out what form field had focus when the form was submitted?

For example, a user presses the enter key instead of clicking the submit button...is there a way to know what field of the form had focus when the enter key was pressed?

[Twey]

<form action="" onsubmit="alert(getSelectedElement(this).name);" name="f1">
  <input type="text" name="text1">
  <input type="text" name="text2">
  <input type="text" name="text3">
</form>
<script type="text/javascript">
function addEvent(el, ev, f) {
  if(el.addEventListener)
    el.addEventListener(ev, f, false);
  else if(el.attachEvent) {
    var t = function() {
      f.apply(el);
    };
    addEvent.events.push({'element': el, 'event': ev, 'handler': f});
    el.attachEvent("on" + ev, t);
  } else
    if(el['on' + ev]) {
      var a = el['on' + ev];
      el['on' + ev] = function() {
        a.apply(this);
        f.apply(this);
      };
    } else el['on' + ev] = f;
}
addEvent.events = [];

if(typeof window.event !== "undefined")
  addEvent(window, "unload", function() {
      for(var i = 0, e = addEvent.events; i < e.length; ++i) {
        e[i].element.detachEvent("on" + e[i].event, e[i].handler);
        e[i].element['on' + e[i].event] = null;
      }
    }
  );

var selEls = [];

addEvent(window, "load", function() {
  for(var i = 0, f = document.forms; i < f.length; ++i) {
    for(var j = 0, e = f[i].elements; j < e.length; ++j) {
      addEvent(e[j], "focus", function() {
        selEls[getObjInCol(this, document.forms)] = this;
      });
      addEvent(e[j], "blur", function() {
        selEls[getObjInCol(this, document.forms)] = null;
      });
    }
    selEls[i] = null;
  }
});

function getSelectedElement(frm) {
  var t;
  return ((t = getObjInCol(frm, selEls)) === -1 ? null : selEls[t]);
}

function getObjInCol(obj, col) {
  for(var i = 0, f = col; i < f.length; ++i)
    if(f[i] == obj)
      return i;
  return -1;
}
</script>

That addEvent() code is getting longer and longer...

[mwinter]

Is there a way to find out what form field had focus when the form was submitted?

Server-side? On the Web? Not reliably, no.

For example, a user presses the enter key instead of clicking the submit button...is there a way to know what field of the form had focus when the enter key was pressed?

Why would it matter?

  else if(el.attachEvent) {
    var t = function() {
      f.apply(el);
    };

/* ... */

      el['on' + ev] = function() {
        a.apply(this);
        f.apply(this);
      };

Why aren't you forwarding the event object?

if(typeof window.event !== "undefined")
  addEvent(window, "unload", function() {
      for(var i = 0, e = addEvent.events; i < e.length; ++i) {
        e[i].element.detachEvent("on" + e[i].event, e[i].handler);

What relevance does a global event property have to do with supporting a detachEvent method? Moreover, the handler property of your addEvent.events array elements doesn't refer to the listener attached to the DOM node.

That addEvent() code is getting longer and longer...

You might consider looking at my events.js, in conjunction with remedial.js (which your code could benefit from, too).

Mike

[Twey]

Why aren't you forwarding the event object?

Good point.

What relevance does a global event property have to do with supporting a detachEvent method?

It's not the detachEvent method I was checking for. I was attempting to detect IE, since browser detection is the only way I can think of to discover whether the browser suffers from IE's memory leak with events. Is there a better way?

[mwinter]

It's not the detachEvent method I was checking for. I was attempting to detect IE, since browser detection is the only way I can think of to discover whether the browser suffers from IE's memory leak with events. Is there a better way?

Do it for all browsers. There's no harm, and it might even be a good thing if there are undiscovered memory leaks in other browsers. The DOM Events specification does recommend that client code remove event listeners once they have fulfilled their purpose.

Mike

[Twey]

Do it for all browsers. There's no harm

The section at the bottom of A Re-Introduction to Javascript says otherwise.

[mwinter]

I should have been more clear: run the code when you've interfered with the addition process as you're creating circular references where they might not otherwise occur. Browsers that support the addEventListener method won't be affected.

The section at the bottom of A Re-Introduction to Javascript says otherwise.

So? The in-memory cache only speeds moving through the history list, and loading from the disk cache is hardly a lengthy process. It doesn't affect functionality.

Mike

[Twey]

Well, no, but it's a disadvantage, and should probably be avoided where possible.