javascript IE 9 和 IE 10 时不时无法在输入文本框中输入文本

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

提问by Pyae Phyo Aung

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 内的输入文本框控件被锁定/冻结。用户无法在其中输入文本。但是文本框可以聚焦而不褪色。没有禁用输入控件的代码，这并不总是发生。到目前为止，这仅在 IE 9 和 IE 10 中发生。Firefox 和 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.

• 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 并显示它。这是由 Javascript 完成的。

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

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

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

回答by William Leung

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.

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

I have just create a fiddle to describe this problem

我刚刚创建了一个小提琴来描述这个问题

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

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

应该有三种解决方法

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

1. 每次我们用 iframe 修改 DOM 时重置焦点

2. 或者安排一个“什么都不做”的耗时任务，这可能会使 IE 神奇地响应鼠标事件，我无法告诉你为什么，也许 M$ 可以

   设置耗时任务的示例代码

   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. 或在从文档中删除之前重置 DOM 内容

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

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

回答by JcAspes

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

jQuery 的解决方案对我来说适用于 IE11，而不是其他解决方案。

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

$(theIframeElement).empty().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 还修复了此问题，因为它的 Dialog.js 插件在 iframe 中显示内容：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

回答by Pyae Phyo Aung

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.

我设法通过将焦点设置回主页来修复此错误。到目前为止，我所做的是：在主页中放置一个 HTML 输入文本框，该文本框设置为不可见。当 iframe 关闭时，我将焦点设置回该文本框。

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

有关此 IE 错误的更多信息，请参阅以下链接。

link1

链接1

link2

链接2

回答by Fyodor

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

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

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

显然，如果您无法控制 iframe，这将不起作用。

回答by GM-Script-Writer-62850

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

• 问题原因（除了 IE 是愚蠢的）：
  • 焦点输入元素从 iframe 内的显示中移除（css 显示属性）
• 问题：
  • 无法点击文本输入元素，但您仍然可以使用 Tab 键访问它
• 解决方法：
  • 在将输入字段从显示中取出之前，我们需要 focus() 一个已知的可见元素，因此在我们将显示从输入字段中取出之前的那一行，我们有这样的行： document.body.focus();

回答by Narain Mittal

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

});

回答by squirrelInTheBarel

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 也无法在更高版本中解决此类问题。

回答by portlandrock

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

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

回答by Frode

I had the same issue with IE11, angularjs and using an IFrame. My template uses ng-switchto 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.

为我解决了问题。

回答by Teddy Han

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

我也被这个问题困扰。正如 William Leung 指出的那样，IE 存在Iframe从 DOM 中删除对象的错误。

Try the following:

请尝试以下操作：

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