We help IT Professionals succeed at work.

Help needed - Tab key just skips over field in VB Script / HTA

Scootman78
Scootman78 used Ask the Experts™
on
I have what I think is a strange problem with my VB Script code and the "window.event.KeyCode" that I use to move from field to field in the HTA form.   What I want to do with the form is have the user go from the first input box on the form to the second input box.  The second, third, and fourth input boxes are in a table.  The problem right now though is when I hit the tab key on the keyboard when the first input box has the focus, it skips the second input box and goes right to the third.  When I keep hitting the tab key, it just keeps skipping over the second input box, but has no problems with every other input box.

Does anyone have any idea why the tab key isn't working correctly with my code?

By the way, whatever the solution is, I can't get rid of the code that makes sure only numbers can be entered through the first box.  I also don't want to use "tabindex" to determine the tab order because in my finished form, the tab order is dynamic based on what fields have values.

Appreciate any help you can give!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2012
Top Expert 2014

Commented:
Have you checked the tabstop property is set to true?  Do you have any OnLostFocus validation or something?   Providing your code might help us....

Regards,

Rob.

Author

Commented:
Woops, I guess I forgot the code didn't I?  Sorry about that, I'm at the end of a very tough day.


<html>
<head>
<HTA:APPLICATION 
     APPLICATIONNAME="Window"
     SCROLL="no"
     SINGLEINSTANCE="yes"
     SysMenu="No"
     CONTEXTMENU="no"  
     BORDER="sizable" 
     SELECTION="no"    
>
<style type='text/css'>
table { width:300px; } 
    tbody { height:10em;  overflow:scroll;} 
    td { height:auto; } 

#my_container {
position:absolute;
      width: 250px;
      padding: 10px;
}

#my_one {
      width:710px;
      overflow:auto;
      position:absolute;
      height:201px;
background-color: #ffffcc;
overflow-x: hidden;
overflow-y:auto;
      margin-bottom: 5px;

}

.lostdragme { cursor: move }
.addressdragme { cursor: move }
.commentsdragme { cursor: move }
</style>
<!--[if IE]>
    <style type="text/css">
      /*<![CDATA[*/
        .ScrollTable {
          overflow-y: auto;
          width: 1px;
        }
      /*]]>*/
    </style>

<SCRIPT language="VBScript" type="text/vbscript">

Sub MaximizeScreen
window.focus()
        window.resizeTo 1040,780
window.moveTo -5,-4
Const ForReading = 1
End Sub

Sub ExitApp
blahtry=msgbox(vbcrlf & "Are you sure you want to exit the form?" & vbcrlf, vbyesno, "Confirmation Needed")
if blahtry=vbyes then
window.close()
End If
End Sub

Sub Box1
if window.event.KeyCode=37 or Window.event.KeyCode=38 then
printwhere.focus()
end if
End Sub

Sub KeyNumCheck
if window.event.KeyCode=39 or window.event.keycode=40 then
TextBox1.focus()
exit sub
end if
If window.event.KeyCode=13 then
TextBox1.focus()
Exit sub
End If
If window.event.KeyCode=9 then
TextBox1.focus()
Exit sub
End If
if window.event.Keycode<48 or window.event.keycode>57 then
if window.event.keycode<96 or window.event.keycode>105 then
Window.Event.returnValue = False
end if
end if
    End Sub

</script>
<title> &nbsp;The Form</title>
</head>
<BODY onload="MaximizeScreen"  style="filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#003366', EndColorStr='#770000')">
<script type='text/javascript' language="javascript">

var ie = document.all;
var nn6 = document.getElementById &&! document.all;

var isdrag = false;
var x, y;
var dobj;
  
</script>
<div style="font-family:verdana;font-size:28px;color:yellow;font-weight:bold;margin-left:12px;margin-top:4px;position:absolute;">Form
</div>
<input type="text" id="printwhere" maxlength="2" style="padding-top:0px;padding-left:0px;width:40px;margin-left:43px;margin-top:117px;height:22px;font-size:16px;font-family:arial;font-weight:bold;position:absolute;text-align:center;" onKeyDown="KeyNumCheck">
</div>
<button onfocus="window.focus()" onclick="ExitApp" style="width:113px;background-color:#4444;margin-left:590px;margin-top:5px;height:57px;font-size:18px;font-family:arial;font-weight:bold;color:navy;position:absolute;">Exit This<br>Form</button></div>
<div style="position:absolute;margin-top:235px;margin-left:44px;font-family:arial;color:white;">
<b><u>#</b></u>
</div>
<div style="position:absolute;margin-top:235px;margin-left:90px;font-family:arial;color:white;">
<b><u>Box 1</b></u>
</div>
<div style="position:absolute;margin-top:235px;margin-left:247px;font-family:arial;color:white;">
<b><u>Box 2</b></u>
</div>
<div style="position:absolute;margin-top:235px;margin-left:526px;font-family:arial;color:white;">
<b><u>Box 3</b></u>
</div>
<div style="margin-top:260px;height:210px;margin-left:35px;width:728px;position:absolute;">
<table border=1 bordercolor=#99ffff cellspacing=0 cellpadding=3>
<tr>
<td>
<div style="margin-left:2px;text-align:center;font-family:arial;color:white;"><b>1.</div></b></td>
<td><input type="text" id="TextBox1" OnKeyDown="Box1" maxlength="108" style="margin-left:5px;width:95px;height:29px;font-weight:bold;font-size:17px;font-family:arial;">&nbsp;</td>
<td><input type="text" id="TextBox2" maxlength="105"  style="margin-left:5px;width:214px;height:29px;font-weight:bold;font-size:17px;font-family:arial;">&nbsp;</td>
<td>
<textarea id="TextBox3" style="margin-left:5px;width:300px;height:58px;font-weight:bold;font-size:17px;font-family:arial;"></textarea> 
</td>
      </tr>
</table>
</div>
</body>
</html>

Open in new window

Author

Commented:
Rob, I tried adding the tabstop property and setting it to true.  It didn't work for me.  I'm not sure how to check for a onLostFocus event in VB Script (Access yes, but I can't figure out the code in VB Script).  I did try the Javascript version ("blur"), but it had devastating results where it wouldn't let me leave the first field (TextBox1) at all.  I'm usually pretty creative with getting around problems like this when it's in Access, but I guess I haven't been around VB Script or Javascript enough to figure much out.  Thanks.
Most Valuable Expert 2012
Top Expert 2014
Commented:
Wow, the tab really seems to have a behaviour of it's own.  I have a feeling the KeyUp is firing in Box1, causing it to tab a second time, but I can bypass it.  The only thing I can think of is to add a dummy text box before this one, and capture only the tab character (ASCII 9) to go the dummy one.

All you need to do then is get the dummy text box hidden.

Regards,

Rob.
<html>
<head>
<HTA:APPLICATION 
     APPLICATIONNAME="Window"
     SCROLL="no"
     SINGLEINSTANCE="yes"
     SysMenu="No"
     CONTEXTMENU="no"  
     BORDER="sizable" 
     SELECTION="no"    
>
<style type='text/css'>
table { width:300px; } 
    tbody { height:10em;  overflow:scroll;} 
    td { height:auto; } 

#my_container {
position:absolute;
      width: 250px;
      padding: 10px;
}

#my_one {
      width:710px;
      overflow:auto;
      position:absolute;
      height:201px;
background-color: #ffffcc;
overflow-x: hidden;
overflow-y:auto;
      margin-bottom: 5px;

}

.lostdragme { cursor: move }
.addressdragme { cursor: move }
.commentsdragme { cursor: move }
</style>
<!--[if IE]-->
    <style type="text/css">
      /*<![CDATA[*/
        .ScrollTable {
          overflow-y: auto;
          width: 1px;
        }
      /*]]>*/
    </style>

<SCRIPT language="VBScript" type="text/vbscript">

Sub MaximizeScreen
window.focus()
        window.resizeTo 1040,780
window.moveTo -5,-4
Const ForReading = 1
End Sub

Sub ExitApp
blahtry=msgbox(vbcrlf & "Are you sure you want to exit the form?" & vbcrlf, vbyesno, "Confirmation Needed")
if blahtry=vbyes then
window.close()
End If
End Sub

Sub Box1
If window.event.KeyCode=37 or Window.event.KeyCode=38 Then
printwhere.focus()
End if
End Sub

Sub KeyNumCheck
'MsgBox window.event.keycode
If window.event.KeyCode=39 or window.event.keycode=40 Or window.event.KeyCode=13 Then
	TextBox1.focus()
ElseIf window.event.keycode=9 Then
	TextDummy1.Focus()
ElseIf Not(window.event.keyCode = 8 Or (window.event.keyCode >= 48 And window.event.Keycode <= 57) Or (window.event.keycode >= 65 And window.event.keycode <= 72) Or window.event.keyCode = 127) Then
	Window.Event.returnValue = False
End If
End Sub

</script>
<title> &nbsp;The Form</title>
</head>
<BODY onload="MaximizeScreen"  style="filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#003366', EndColorStr='#770000')">
<script type='text/javascript' language="javascript">

var ie = document.all;
var nn6 = document.getElementById &&! document.all;

var isdrag = false;
var x, y;
var dobj;
  
</script>
<div style="font-family:verdana;font-size:28px;color:yellow;font-weight:bold;margin-left:12px;margin-top:4px;position:absolute;">Form
</div>
<input type="text" id="printwhere" maxlength="2" style="padding-top:0px;padding-left:0px;width:40px;margin-left:43px;margin-top:117px;height:22px;font-size:16px;font-family:arial;font-weight:bold;position:absolute;text-align:center;" onKeyDown="KeyNumCheck">
</div>
<button onfocus="window.focus()" onclick="ExitApp" style="width:113px;background-color:#4444;margin-left:590px;margin-top:5px;height:57px;font-size:18px;font-family:arial;font-weight:bold;color:navy;position:absolute;">Exit This<br>Form</button></div>
<div style="position:absolute;margin-top:235px;margin-left:44px;font-family:arial;color:white;">
<b><u>#</b></u>
</div>
<div style="position:absolute;margin-top:235px;margin-left:90px;font-family:arial;color:white;">
<b><u>Box 1</b></u>
</div>
<div style="position:absolute;margin-top:235px;margin-left:247px;font-family:arial;color:white;">
<b><u>Box 2</b></u>
</div>
<div style="position:absolute;margin-top:235px;margin-left:526px;font-family:arial;color:white;">
<b><u>Box 3</b></u>
</div>
<div style="margin-top:260px;height:210px;margin-left:35px;width:728px;position:absolute;">
<table border=1 bordercolor=#99ffff cellspacing=0 cellpadding=3>
<tr>
<td>
<div style="margin-left:2px;text-align:center;font-family:arial;color:white;"><b>1.</div></b><input type="text" id="TextDummy1" maxlength="1" size="1" readonly></td>
<td><input type="text" id="TextBox1" OnKeyDown="Box1" maxlength="108" style="margin-left:5px;width:95px;height:29px;font-weight:bold;font-size:17px;font-family:arial;">&nbsp;</td>
<td><input type="text" id="TextBox2" maxlength="105"  style="margin-left:5px;width:214px;height:29px;font-weight:bold;font-size:17px;font-family:arial;">&nbsp;</td>
<td>
<textarea id="TextBox3" style="margin-left:5px;width:300px;height:58px;font-weight:bold;font-size:17px;font-family:arial;"></textarea> 
</td>
      </tr>
</table>
</div>
</body>
</html>

Open in new window

Author

Commented:
It works!  I just had to change the height and width of the dummy text box to 0 and move it out of the table (so it didn't cause display problems with the table).  It works great now.  Also, if I wanted to cycle back to the first text box, I had to also add a "TextDummy0" box before the first input box and create a sub for the 4th input box (the last one on the form) similar to that of the 1st.  It all works now, even in the larger piece of code that I was actually trying to create.  Thanks Rob for the help!
Most Valuable Expert 2012
Top Expert 2014

Commented:
So you moved the text box *out* of the table?  I thought it was the fact that it *had* a table was causing the tab to *not* go to it.....

Oh well, I'm glad you got it sorted.  Glad I could help.  The only reason I came to that conclusion was because I tried a heap of tests with OnKeyDown, OnKeyPress, and OnKeyUp on all of the text boxes, and got some really odd results, especially when comparing [TAB] to [ENTER], hence the isolation of the focused control from only the [TAB] character.

Regards,

Rob.