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

Question

有一个网页，里面有一个 iframe。有时，iframe 内的输入文本框控件被锁定/冻结。用户不能在其中输入文本。但是文本框可以聚焦而不褪色。没有禁用输入控件的代码，这并不总是发生。到目前为止，这仅在 IE 9 和 IE 10 中发生。Firefox 和 Chrome 都可以。

页面工作原理的简要说明是：

父页面上有一个按钮。通过单击它将从头开始构建一个 iframe 并显示它。这是由 Javascript 完成的。
同样，iframe 上有一个按钮可以关闭它。通过单击它将
从父页面的 DOM 中删除 iframe。

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

score 35 · Accepted Answer

这个错误非常烦人，更糟糕的是，我们在谷歌上找到的信息很少。

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

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

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

为什么多年来 M$ 都很难解决这个问题？

应该有三种解决方法

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

或者安排一个“什么都不做”的耗时任务，这可能会使 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);

或在从文档中删除之前重置 DOM 内容
```
someDivWithIframe.innerHTML = "";
$(someDivWithIframe).remove();
```
我不确定它是否对所有情况都有帮助，您应该尝试一下

score 5 · Accepted Answer

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

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

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

iframe.src=""

但是，如果您使用的是旧的 jQuery 版本 < 1.11.1，这会在 IE11 上导致异常“访问被拒绝”

一些链接：有关信息，jQuery 还修复了这个问题，因为它是在 iframe 中显示内容的 Dialog.js 插件：http: //bugs.jqueryui.com/ticket/9122

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

score 4 · Accepted Answer

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

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

链接1

链接2

score 3 · Accepted Answer

在 IE 11 中没有一个解决方案对我有用。

通过在 iframe 中添加以下代码来解决它：

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

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

score 3 · Accepted Answer

这在 IE11 上对我有用，

问题的原因（除了 IE 很愚蠢）：
- 从 iframe 内的显示中删除焦点输入元素（css 显示属性）
问题：
- 无法单击文本输入元素，但您仍然可以选择它
解决方法：
- 在将输入字段移出显示之前，我们需要 focus() 一个已知的可见元素，因此在我们将显示从输入字段中移开之前的行上，我们有以下行：document.body.focus();

score 2 · Accepted Answer

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

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

完整的片段，因为我正在使用引导模态并且模态有一个 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();

});

score 1 · Accepted Answer

我最初编写了下面的插件来解决 IE 8 中的内存泄漏，但因此它也解决了这个问题。

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

score 1 · Accepted Answer

使用 Javascript 的简单解决方案对我有用，我在其他浏览器中没有看到任何副作用：

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

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

无论如何，MS 也无法在更高版本中解决此类问题，这是相当可悲的。

score 0 · Accepted Answer

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

尝试以下操作：

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

score 0 · Accepted Answer

我在 IE11、angularjs 和使用 IFrame 时遇到了同样的问题。我的模板用于ng-switch更改视图模式。其中一种视图模式包含一个 IFrame。我从包含 IFrame 的视图模式切换的那一刻：

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

为我解决了这个问题。

score 0 · Accepted Answer

这是对我有用的解决方案，在此页面上尝试了所有其他解决方案！需要 jQuery，但我确信如果有必要，它可以用原生 JavaScript 重写。

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

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

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

11 回答 11

Related

Reference