Question

I have a list of input fields and when I tab through them I want to loop back to the first one, but it doesn’t seem to work.

Here is my HTML

<form id="form">
  <input id="mon" type="text"/> Month<br>
  <input id="day" type="text"/> Day<br>
  <input id="num" type="text"/> Year<br>
  <input id="amt" type="text"/> Amount<br>
</form>

and my javascript

window.onload=function(){
  $('mon').focus();
  $('amt').onblur=function(){
    //Process the input fields
    $('mon').focus();
  }
}
function $(a){return document.getElementById(a)}

Answer 1

I think your onblur event handler is being called before the default handler, causing focus to shift first to input ‘mon’, then to whatever the browser thinks should be in focus next. Try using the onkeypress event. e.g.

window.onload=function(){
  $('mon').focus();
  $('amt').onkeydown = function(e) {
    //check for IE weirdness
    if (e === undefined && event !== undefined)
      e = event;
    if (e.keyCode == 9) {
      $('mon').focus();
      return false;
    }
  }
}
function $(a){return document.getElementById(a)}

Edit: onkeydown actually seems to work in more browsers

Edit 2: added IE case. IE doesn’t always pass the event as an argument