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

Answer 2

The solution with jQuery worked on IE11 for me, not the other solutions.

$(theIframeElement).empty().remove();

An other solution working on IE9/10 was to set the iframe src to empty before deleting it

iframe.src=""

But this cause an exception "Access denied" on IE11 if you are using an older jQuery version < 1.11.1

Some links: For information, jQuery also fixed this Issue for it's Dialog.js plugin that was displaying content in an iframe: http://bugs.jqueryui.com/ticket/9122

jQuery bug fix to IE11 "access denied" error: http://bugs.jquery.com/ticket/14535

Answer 3

I have managed to fix this bug by setting focus back to the main page. What I have done so far is: put an HTML input textbox, which is set invisible, in the main page. When the iframe closes, I set focus back to that textbox.

Please refer following links for more information about this IE bug.

link1

link2

Answer 4

None of the solutions worked for me in IE 11.

Solved it by adding this code inside iframe:

$("input").first().focus().blur();

Obviously, this won't work if you don't have control over your iframe.

Answer 5

This worked for me on IE11,

• Cause of issue (aside from IE being stupid):
  • Focused input element is removed from display inside a iframe (css display property)
• Issue:
  • Text input element can not be clicked on, you can still tab to it however
• Workaround:
  • We need to focus() a known visible element before taking a input field out of display, so on the line before we take the display away from a input field we have the line: document.body.focus();

Answer 6

Just to add to what others said, it is actually a problem when some input in an iframe is having focus which is then closed causing all other inputs to lose focus. And indeed having a script to set focus to an element solves the problem. But for me this wasn't working because some of my inputs were disabled. So the solution that worked for me is below

$("input[type=text]:not([disabled])").first().focus();

Complete snippet as I was using bootstrap modal and the modal had an iframe. I set the focus to an editable field before opening a model and after closing:

var modalInstance = $uibModal.open({
    // modal properties
  });
modalInstance.closed.then(function () {
  $("input[type=text]:not([disabled])").first().focus();
});
modalInstance.opened.then(function () {
  $("input[type=text]:not([disabled])").first().focus();

});

Answer 7

I originally wrote the plugin below to address memory leaks in IE 8, but consequently it also fixes this problem.

https://github.com/steelheaddigital/jquery.purgeFrame

Answer 8

Simple solution with Javascript which works for me and I saw no side effects in other browsers:

<script>
  var pswElement = document.getElementById("password");
  pswElement.addEventListener("focus", myFocusFunction, true);

  function myFocusFunction() {    
    document.getElementById("password").select();
  }
</script>

Anyway is quite sad MS is not able fix such problem in higher version too.

Answer 9

I was also suffering from this issue. As William Leung has pointed, IE has a bug with remove Iframe Object from DOM.

Try the following:

$(someDivWithIframe).empty().remove();

Answer 10

I had the same issue with IE11, angularjs and using an IFrame. My template uses ng-switch to change view-modes. One of the view-modes contains an IFrame. The moment I switch away from the view-mode containing the IFrame:

var iFrame = <HTMLIFrameElement>document.getElementById("myIFrame");
iFrame.focus();
this.mode = ViewModes.ModeWithoutIFrame;

Solved the problem for me.

Answer 11

Here's the solution that worked for me, having tried all of the others on this page! Requires jQuery but I'm sure it could be rewritten in native JavaScript if that's necessary.

As with many of the other solutions, this should be added to the source of the iframe, assuming you have access to modify it:

$("body").focusout( function () { window.focus(); });