ie9和ie10不能不时地在输入文本框中输入文本

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.

里面有一个带有iframe的网页。有时，iframe中的输入文本框控件会被锁定/冻结。用户无法输入文本。但是文本框可以集中而不褪色。没有禁用输入控件的代码，这并不总是发生。到目前为止，这只发生在ie9和ie10中。火狐和Chrome都没问题。

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.

在父页面上有一个按钮。通过单击它，将从头构建一个iframe并显示它。这是由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.

同样，iframe上有一个按钮来关闭它。通过单击，它将从父页面的DOM中删除iframe。

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

如果您需要更多的信息，请告诉我。提前谢谢。

11 个解决方案

#1

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

这个bug很烦人，更糟糕的是我们在谷歌上能找到的信息很少。

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

关于IE9，微软只有一个链接，但是IE10 / IE11仍然存在问题，而且更容易重现。

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?

为什么M$要这么多年才能解决这个问题?

there should be three workarounds

应该有三个变通方法。

Reset the focus every time we modify the DOM with iframe
每次使用iframe修改DOM时重置焦点
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

或者安排一个“什么都不做”的耗时任务，这可能会让IE对鼠标事件做出神奇的反应，我不知道为什么，也许M$可以

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);
```
or reset the DOM content before remove it from document

或者在从文档中删除DOM内容之前重置它
```
someDivWithIframe.innerHTML = "";
$(someDivWithIframe).remove();
```
I am not sure if it helps for all cases, you should have a tried

我不确定这是否对所有的情况都有帮助，你应该试一试。

#2

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

jQuery解决方案为我解决了IE11，而不是其他解决方案。

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

$(theIframeElement)空虚().remove();

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

IE9/10的另一个解决方案是在删除iframe src之前将其设置为空

iframe.src=""

iframe.src = " "

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

但是，如果您使用的是较老的jQuery版本< 1.11.1，则会在IE11上引发异常“拒绝访问”

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也为它的对话框修复了这个问题。在iframe中显示内容的js插件:http://bugs.jqueryui.com/ticket/9122

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

jQuery修复IE11“拒绝访问”错误:http://bugs.jquery.com/ticket/14535

#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.

通过将焦点重新设置到主页上，我成功地修复了这个bug。到目前为止，我所做的是:在主页中放置一个HTML输入文本框，该文本框设置为不可见。当iframe关闭时，我将焦点集中回那个文本框。

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

有关这个IE bug的更多信息，请参考以下链接。

link1

link2

#4

None of the solutions worked for me in IE 11.

在IE 11中，所有的解决方案对我都不起作用。

Solved it by adding this code inside iframe:

通过在iframe中添加此代码来解决:

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

$("输入")当代().focus().blur();

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

很明显，如果你不能控制你的iframe，这是行不通的。

#5

This worked for me on IE11,

这对我的IE11很有效，

Cause of issue (aside from IE being stupid):
- Focused input element is removed from display inside a iframe (css display property)
- 焦点输入元素从iframe内的显示中移除(css display属性)
引起问题的原因(除了IE很蠢):焦点输入元素从iframe内的显示中删除(css display属性)
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();
- 我们需要焦点()一个已知的可见元素，然后从显示中取出输入字段，因此在从输入字段中取出显示之前的行中，我们有一行:document.body.focus();
解决方法:我们需要将焦点()集中在一个已知的可见元素上，然后在显示输入字段之前，在我们将显示从输入字段中移除之前，我们有一行:document.body.focus();

#6

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

我最初编写插件是为了解决IE 8的内存泄漏问题，但它也解决了这个问题。

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

#7

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

再补充一点，当iframe中的一些输入有焦点时，它实际上是一个问题，然后关闭焦点，导致所有其他输入失去焦点。实际上，为元素设置焦点的脚本可以解决这个问题。但对我来说，这不起作用，因为我的一些输入被禁用了。所以对我有效的解决方案在下面

$("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:

当我使用引导模式和模式时，完整的片段有一个iframe。在打开模型之前和关闭模型之后，我将焦点设置为可编辑字段:

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

});

#8

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

我也受到了这个问题的困扰。正如梁朝伟(William Leung)所指出的，IE有一个错误，将Iframe对象从DOM中删除。

Try the following:

试试以下:

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

#9

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:

我对IE11、angularjs和使用IFrame也有同样的问题。我的模板使用ng-switch更改视图模式。其中一个视图模式包含一个IFrame。当我离开包含IFrame的视图模式时:

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

Solved the problem for me.

帮我解决了这个问题。

#10

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

Javascript的简单解决方案，对我来说是可行的，我在其他浏览器中没有看到副作用:

<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.

总之，可悲的是MS也不能在更高版本中解决这样的问题。

#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.

这是对我有用的解决方案，在这一页上尝试了所有其他的方法!需要jQuery，但我确信如果需要，可以用本机JavaScript重写它。

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

与其他许多解决方案一样，这应该添加到iframe的源代码中，前提是您有权修改它:

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

美元(“身体”)。focusout(function () {window.focus();});

#1