javascript - IE 9 and IE 10 cannot enter text into input text boxes from time to time

Question

There is a web page with an iframe inside. Sometimes, Input text box controls, inside the iframe, are locked/ freezed. Users cannot enter text into them. But the text box can be focused and not faded. There is no code to disable the input controls and this does not always happen. Up until now, this is happening only in IE 9 and IE 10. Firefox and Chrome is OK.

Brief description of how the page works is:

• There is a button on the parent page. By clicking it will build an iframe from scratch and show it. This is done by Javascript.

• Again, there is a button on the iframe to close it. By clicking it
  will remove the iframe from the parent page's DOM.

Please let me know if you want further information as required. Thanks in advance.

Answer 1

This bug is very annoying, even worse there was very few informations we could find on google.

There is only one link from Microsoft that about IE9, but problem still exists in IE10 / IE11 and much easier to reproduce.

I have just create a fiddle to describe this problem

http://jsfiddle.net/WilliamLeung/T3JP9/1/

Why it is so hard for M$ to fix this issue for years?

there should be three workarounds

1. Reset the focus every time we modify the DOM with iframe

2. or schedule a "do nothing" time consuming task, which may make IE response to mouse event magically, I could not tell you why, maybe M$ could

   The sample codes which setup a time consuming task

   setInterval(function () {
       var loopCount = 10000;
       var x = 0;
       for (var i = 0; i < loopCount; i++) {
           x = (x + Math.random() * 1000) >>> 0;
       }
       return x;
   }, 1000);
   

3. or reset the DOM content before remove it from document

   someDivWithIframe.innerHTML = "";
   $(someDivWithIframe).remove();
   

   I am not sure if it helps for all cases, you should have a tried