When a user enters data in a TextBox control, and then clicks the next TextBox control to enter data there, the insertion point disappears. If the user starts to type, the keystrokes appear inside the static text under the location on the page where the user clicked. When a user traps the onchange event for the first TextBox control to run code, more text or other Web page elements appear between the two TextBox controls. Also, the second TextBox control moves away from the insertion point position.
↑ Back to the top
To work around this problem, do any one of the following:
- Use the onblur event instead of the onchange event to run the validation code.
- Change the placement of the page elements to prevent element movement.
- Use the window.setTimeout function to reposition the insertion point, as in the following sample code.
<table id="tableWithProblem">
<tr>
<td>
<input id="tb1" type="text" onchange="validate()" value="">
<span class="hiddenText" id="msg">
The value contains text!
</span>
</td>
<td>
<!-- Added code to the ONFOCUS event of the affected text box -->
<input id="tb2" type="text" value="" onfocus='window.setTimeout("tb2.select();",10);'>
<!--<input id="tb2" type="text" value="">-->
</td>
</tr>
</table>
In this sample code, notice that the .select method is used instead of the .focus method. Technically, the TextBox control already has focus. However, functionally, it does not. Therefore, the .select method is used to move the insertion point to the correct location.
For more information about the window.setTimeout function, visit the following Microsoft Developer Network (MSDN) Web site:
↑ Back to the top
Microsoft has confirmed that this is a bug in the Microsoft products that are listed in the "Applies to" section.
↑ Back to the top
Steps to reproduce the problem
- Save the following code as an HTML page.
<HTML>
<HEAD>
<title>Dynamic Focus Problem</title>
<style>
SPAN.HiddenText { Display: none }
SPAN.RedText { COLOR: red }
</style>
<script>
function validate() {
if (tb1.value.length > 0) {
msg.className = "redText";
}
else {
msg.className = "hidden";
}
}
</script>
</HEAD>
<body>
<table id="tableWithProblem">
<tr>
<td>
<input id="tb1" type="text" onchange="validate()" value="">
<span class="hiddenText" id="msg">The value contains text!</span>
</td>
<td>
<input id="tb2" type="text" value="">
</td>
</tr>
</table>
</body>
</HTML> - Open the page in Microsoft Internet Explorer.
- Click the TextBox control on the left, and then type some text in the TextBox control.
- Click the TextBox control on the right.
Notice that The value contains text! appears between the TextBox controls. Also, notice that the second TextBox control has moved to the right, and the insertion point does not appear. - Type some text.
Notice that the text appears in the static page area.
↑ Back to the top
Retired KB Content DisclaimerThis article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.
↑ Back to the top