Onkeydown event dosen’t work when TAB key is pressed

@subratparidaOct 05.2007

Hi,

I have one html form and I want to move cursor to another field to a different tabindex order using TAB key. I wrote a function “moveto()”, and it is called on field EMAIL on event Onkeydown, the cursor should move to field ‘realname’, but it doesn’t work.

Dose anyone know how it can be fixed?

<html>
<head>
<script type=”text/javascript”>
function moveto(){
document.forms[0].elements[‘realname’].focus()
}
</script>
</head>
<body>
<FORM ACTION=”” METHOD=POST>
<TABLE BORDER CELLPADDING=3 CELLSPACING=5 BGCOLOR=”#FFFFCC”>
<TR>
<TD>name: <INPUT NAME=”realname” TABINDEX=1></TD>
<TD ROWSPAN=4>comments<BR>
<TEXTAREA COLS=25 ROWS=5 TABINDEX=4></TEXTAREA></TD></TR>
<TR> <TD>email: <INPUT NAME=”email” TABINDEX=3 onkeydown=”moveto()”></TD></TR>
<TR> <TD>department: <SELECT NAME=”dep” TABINDEX=5>
<OPTION VALUE=””>…
<OPTION VALUE=”prd”>Production</SELECT></TD></TR>
</TABLE>
</FORM>
</body>
</html>

Thanks,
Subrat

to post a comment

JavaScript

11 Comments(s) _↴

@harumphOct 06.2007 — #Your script keeps it in the first field (named realname).

Are you simply wanting them to input the fields in order? TABINDEX will tab them in that order by itself. If you first want to have them fill out the realname field, that's different.

&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function moveto(){
 if  (document.forms[0].elements['realname'].value == ""){
 document.forms[0].elements['realname'].focus();
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;FORM ACTION="" METHOD=POST&gt;
 &lt;TABLE BORDER CELLPADDING=3 CELLSPACING=5 BGCOLOR="#FFFFCC"&gt;
 &lt;TR&gt;
 &lt;TD&gt;name: &lt;INPUT NAME="realname" TABINDEX=1&gt;&lt;/TD&gt;
 &lt;TD ROWSPAN=4&gt;comments&lt;BR&gt;
 &lt;TEXTAREA COLS=25 ROWS=5 TABINDEX=4 onkeydown="moveto()"&gt;&lt;/TEXTAREA&gt;&lt;/TD&gt;&lt;/TR&gt;
 &lt;TR&gt; &lt;TD&gt;email: &lt;INPUT NAME="email" TABINDEX=3 onkeydown="moveto()"&gt;&lt;/TD&gt;&lt;/TR&gt;
 &lt;TR&gt; &lt;TD&gt;department: &lt;SELECT NAME="dep" TABINDEX=5 onchange="moveto()"&gt;
 &lt;OPTION VALUE=""&gt;...
 &lt;OPTION VALUE="prd"&gt;Production&lt;/SELECT&gt;&lt;/TD&gt;&lt;/TR&gt;
 &lt;/TABLE&gt;
 &lt;/FORM&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@subratparidaauthorOct 06.2007 — #This is just a test html form I have created to test the function to check how it works.

We have one requirement, for example, if email field (tabindex = 3) hold a value, if TAB key is pressed the cursor should move to 'tabindex = 6' instead of 'tabindex = 4'.

I know it can be done in onchange event in email field, it works but problem is if user go back to 'tabindex=1' then TAB again come back to email field, then TAB again on email field without changing the value of email field, the cursor goes to tabindex=4 becasue it dosen't fire onchnage event, that i don't want, it should go to tabindex=6. It can be only done in onkeydown event.

@DokOct 07.2007 — #Use the onblur event instead of onchange. This will fire each time you leave the field.

@harumphOct 08.2007 — #As Dok stated, use the onblur if you need to. My script simply checked to see that your first field was not blank. If it was, I forced you to enter something. If you [additionally] need to bypass a few fields, just use the onblur calling another function:

[CODE]<html>
 <head>
 <script type="text/javascript">
 function moveto(){
 if  (document.forms[0].elements['realname'].value == ""){
 document.forms[0].elements['realname'].focus();
 }
 }
 function move2(){
 if  (document.forms[0].elements['email'].value != ""){
 document.forms[0].elements['blah'].focus();
 }
 }
 </script>
 </head>
 <body>
 <FORM ACTION="" METHOD=POST>
 <TABLE BORDER CELLPADDING=3 CELLSPACING=5 BGCOLOR="#FFFFCC">
 <TR>
 <TD>name: <INPUT NAME="realname" TABINDEX=1></TD>
 <TD ROWSPAN=4>comments<BR>
 <TEXTAREA COLS=25 ROWS=6 TABINDEX=3 onkeydown="moveto()"></TEXTAREA></TD></TR>
 <TR> <TD>email: <INPUT NAME="email" TABINDEX=2 onkeydown="moveto();" onblur="move2();"></TD></TR>
 <TR> <TD>department: <SELECT NAME="dep" TABINDEX=4 onchange="moveto()">
 <OPTION VALUE="">...
 <OPTION VALUE="prd">Production</SELECT></TD></TR>
 <tr>
 <td>Blah: <input type="text" name="blah" TABINDEX=5></td>
 </tr>
 </TABLE>
 </FORM>
 </body>
 </html>[/CODE]

@subratparidaauthorOct 08.2007 — #I replaced the onchange with the onblur, it works on IE but not on Firefox.

Same also harumph's method doesn't work on Firefox.

@harumphOct 08.2007 — #Oops. Broke my own rule. Sorry. I'll test better.

@harumphOct 08.2007 — #Ok. Try 'dis.

[CODE]<html>
 <head>
 <script type="text/javascript">
 function moveto(){
 var realname = document.getElementById('realname'); 
 if  (realname.value == ""){
 realname.focus();
 }
 }
 function move2(){
 var email = document.getElementById('email'); 
 var blah = document.getElementById('blah'); 
 if  (email.value != ""){
 blah.focus();
 }
 }
 
 IE5=document.all? 1:0
 function displayKeycode(e){
 var blah = document.getElementById('blah'); 
 whKey = !IE5? e.which:event.keyCode; // check for NS4 and NS6
 if (whKey == 9){
 blah.focus();
 } 
 }
 </script>
 </head>
 <body>
 <FORM ACTION="" METHOD=POST>
 <TABLE BORDER CELLPADDING=3 CELLSPACING=5 BGCOLOR="#FFFFCC">
 <TR>
 <TD>name: <INPUT name="realname" id="realname" TABINDEX=1></TD>
 <TD ROWSPAN=4>comments<BR>
 <TEXTAREA COLS=25 ROWS=6 TABINDEX=3 onkeydown="moveto()" name="description" id="description"></TEXTAREA></TD></TR>
 <TR> <TD>email: <INPUT id="email" name="email" TABINDEX=2 onkeydown="moveto();" onblur="move2();"></TD></TR>
 <TR> <TD>department: <SELECT id="dep" name="dep" TABINDEX=4 onchange="moveto()">
 <OPTION VALUE="">...
 <OPTION VALUE="prd">Production</SELECT></TD></TR>
 <tr>
 <td>Blah: <input type="text" id="blah" name="blah" TABINDEX=5></td>
 </tr>
 </TABLE>
 </FORM>
 </body>
 </html>[/CODE]

@subratparidaauthorOct 08.2007 — #Thanks for working on this issue and helping me.

Still this one doesn't work on Firefox, it works perfectly on IE.

On Firefox after I entered value in Email field the Blah field doesn't focus.

@harumphOct 08.2007 — #After you enter data in email field, hit tab and start typing.

@subratparidaauthorOct 08.2007 — #It works but the problem is user will get confused if Blah field doesn't get focus, they don't know where the cursor is.

@harumphOct 08.2007 — #Does anyone have a fix for this? It's working, but in FF, the focus within the blah field is not pronounced (field is not showing a blinking cursor). Could I create a settimeout if they are in FF and refocus blah? Anyone? Any better ideas? There's gotta be an easy way to do this.

Also in #JavaScript _↴

Falling images script order menu system A problem with the JavaScript code on my website

Success!

Help @subratparida spread the word by sharing this article on Twitter...

Tweet This

Onkeydown event dosen’t work when TAB key is pressed

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Onkeydown event dosen’t work when TAB key is pressed

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴