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.

Lazulite

is there any z-index applied in css for fields container? – Sustentacular

were you able to figure out this issue? i have something similar – Forta

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

Roturier

This has driven me insane for almost 2 days now. Our testers and PM were convinced it was some bad logic in our code. Turns out it was that we use a couple CK Editors that will be removed or added depending on other settings and if you happen to have focus in one of them when it gets removed, it gets eaten. My fix was to just do a .blur() and .focus() on a known element – Hardison

"There is only one link from Microsoft that about IE9" (please actually give us the link!) – Hali

@JamiePate I have added some links about this bug in my own answer. – Lazulite

#3 worked for me to resolve a situation involving iframes and Internet Explorer 11 (IE11). I did not try 1 or 2, so those may also work. – Ionopause

Great. But our iframe is in an ASP NET UpdatePanel which is hidden in the codebehind. Whilst I can control this in javascript (using option 3) after I do postback, we have like 150+ iframes in the application to apply this change to. – Beast

#2 does not work for me in the demo, perhaps the load is insufficient for my cpu (i5-4690k) – Madelon

Our fix for this issue was to create a 0 width/height, off-screen textbox on the host of the iframe, and when that iframe is to close, first focus on that textbox and then close the iframe. Seems to work perfectly. So in William's example, in closePopup, if you just focus on "loopCount" before you remove the frame, everything works: jsfiddle.net/T3JP9/295. Thanks for the find! – Broadcaster

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

Goldston

Oh sorry, i make a mistake, the focus problem just come back on my IE11 !!! i want to cry ! so no solution for the moment for IE11 – Goldston

I was doing a window.focus() after removing the iframe. removing the window.focus() seam to make the bug disappear on IE11, but some time (randomly) THE BUG come back on IE11 – Goldston

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

Lazulite

Thanks, your solution is great :) – Nagari

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.

Kamerun

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();

Madelon

I tried document.body.focus(); but I didn't work. After that I tried to focus on an input element <input type="text" /> instead then it worked. – Nagari

Maybe there is a doc type limitation, i am using <!DOCTYPE html> – Madelon

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();

});

Anyaanyah

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

Predesignate

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.

Blowpipe

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();

Advertence

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.

Eldwen

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(); });

Chorion