BUG: Static HTML becomes editable in Internet Explorer (843164)


The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 5.5 SP2
  • Microsoft Internet Explorer (Programming) 6.0
  • Microsoft Internet Explorer (Programming) 6 (SP1)

SYMPTOMS

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.

WORKAROUND

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>
    Alternatively, you can use the onmousedown event to fire only when the mouse is used to put focus in the TextBox control.

    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:

    http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/setTimeout.asp

STATUS

Microsoft has confirmed that this is a bug in the Microsoft products that are listed in the "Applies to" section.

MORE INFORMATION

Steps to reproduce the problem

  1. 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>
  2. Open the page in Microsoft Internet Explorer.
  3. Click the TextBox control on the left, and then type some text in the TextBox control.
  4. 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.
  5. Type some text.

    Notice that the text appears in the static page area.
Modification Type:MajorLast Reviewed:4/21/2006
Keywords:kbbug KB843164 kbAudDeveloper
©2004 Microsoft Corporation. All rights reserved.