Tab sets the focus on the wrong field, but Enter works fine

Forum Moderators: open

Message Too Old, No Replies

Tab sets the focus on the wrong field, but Enter works fine

(trapping both Tab & Enter with onKeyDown, but get diff. results)

MichaelBluejay

1:48 pm on Jun 1, 2010 (gmt 0)

Here's my code:

<input id=first>
<input>
<input onkeydown="if(event.keyCode==9 || event.keyCode==13) document.getElementById('first').focus()">
<input>

When the cursor's in the third field, pressing Return/Enter focuses the first field, as it should.

But when the cursor's in the third field, pressing Tab focuses the *second* field, not the first field.

?

Incidentally, I'm not using HTML's tabindex attribute because I want to keep tab's within the form, and tabindex tabs out of the form after the last field is reached.

subexpression

6:37 pm on Jun 1, 2010 (gmt 0)

MichaelBluejay,

The problem with the focus jumping from 'first' to the second input is...

...when the onkeydown event fires, you're telling the document to move focus() from the current input to the input 'first'.

THEN, the event carries out the keyboard instruction to TAB to the next input...which happens to be the second.

So, what you'll need to do is stop the event from propagating.

You probably could fit it all in the onkeydown="" attribute, but it's cleaner and easier to manage your code if you put it in it's own function...and stash it in the <head> of the document somewhere.

<script type="text/javascript"> 
function tab(e){ 
 if(e.keyCode == (9 || 13)){ 
  document.getElementById('first').focus(); 
 } 
 try { 
  e.stopPropagation(); 
  e.preventDefault(); 
 } 
 catch(err){ 
  e.cancelBubble = true; 
  e.returnValue = false; 
 } 
} 
</script> 
 
<input id=first>  
<input>  
<input onkeydown="tab(event)"> 
<input>

MichaelBluejay

6:33 am on Jun 2, 2010 (gmt 0)

Ah, okay, I see the problem. But now that I know what the problem is, I'm able to fix it by simply adding "return false" to my <input>:

<input onkeydown="if(event.keyCode==9 || event.keyCode==13) document.getElementById('first').focus(); return false">

Is there some reason I shouldn't do it that way? If it's that it doesn't work with ancient browsers, that's fine with me.

subexpression

7:29 am on Jun 2, 2010 (gmt 0)

MichaelBluejay,

return false will prevent the user from typing text.

Also, I looked at my code I posted, and modified it a bit:


<script type="text/javascript"> 
function tab(e){ 
 if(e.keyCode == (9 || 13)){ 
  document.getElementById('first').focus(); 
  try { 
   e.stopPropagation(); 
   e.preventDefault(); 
  } 
  catch(err){ 
   e.cancelBubble = true; 
   e.returnValue = false; 
  } 
 } 
} 
</script> 
<input id=first>  
<input>  
<input onkeydown="tab(event)"> 
<input>

Placing the try/catch inside the if condition will allow users to type text in the input.

MichaelBluejay

2:59 am on Jun 3, 2010 (gmt 0)

Right. I guess I should have tried testing some input other than Tab.... Anyway, thanks for the revised solution!