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

Posted

技术标签:

【中文标题】IE 9 和 IE 10 时不时无法在输入文本框中输入文本【英文标题】：IE 9 and IE 10 cannot enter text into input text boxes from time to time 【发布时间】：2013-10-09 14:37:29 【问题描述】：

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

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

父页面上有一个按钮。通过单击它将构建一个 iframe 从头开始​​并显示它。这是由 javascript 完成的。

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

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

【问题讨论】：

字段容器的css中是否应用了z-index？ 你能解决这个问题吗？我有类似的东西 【参考方案1】：

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

微软只有一个关于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();

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

【讨论】：

这让我发疯了将近 2 天。我们的测试人员和 PM 确信这是我们代码中的一些错误逻辑。事实证明，我们使用了几个 CK 编辑器，它们将根据其他设置被删除或添加，如果你碰巧在其中一个被删除时将焦点放在其中，它就会被吃掉。我的解决方法是只对已知元素执行 .blur() 和 .focus() “微软只有一个链接是关于IE9的”（请把链接给我们！） @JamiePate 我在自己的答案中添加了一些关于这个错误的链接。 #3 为我解决了涉及 iframe 和 Internet Explorer 11 (IE11) 的情况。我没有尝试 1 或 2，所以这些也可能有效。 我们对这个问题的修复是在 iframe 的宿主上创建一个 0 宽度/高度的离屏文本框，当该 iframe 要关闭时，首先关注该文本框，然后关闭框架。似乎工作完美。因此，在 William 的示例中，在 closePopup 中，如果您在移除框架之前只关注“loopCount”，那么一切正常：jsfiddle.net/T3JP9/295。感谢您的发现！【参考方案2】：

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

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

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

iframe.src=""

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

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

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

【讨论】：

哦，对不起，我搞错了，焦点问题又出现在我的IE11上！！！我想哭 ！所以暂时没有 IE11 的解决方案 删除 iframe 后，我正在做一个 window.focus()。删除 window.focus() 接缝以使错误在 IE11 上消失，但有时（随机）错误会在 IE11 上再次出现【参考方案3】：

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

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

link1

link2

【讨论】：

谢谢，您的解决方案很棒:)【参考方案4】：

在 IE 11 中没有任何解决方案适合我。

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

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

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

【讨论】：

【参考方案5】：

这在 IE11 上对我有用，

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

【讨论】：

我试过document.body.focus();，但没有成功。之后，我尝试专注于输入元素&lt;input type="text" /&gt;，然后它起作用了。 可能存在文档类型限制，我使用的是&lt;!DOCTYPE html&gt;【参考方案6】：

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

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

完成 sn-p，因为我使用的是引导模式，并且模式有一个 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();

);

【讨论】：

【参考方案7】：

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

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

【讨论】：

【参考方案8】：

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

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

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

无论如何，MS 也无法在更高版本中修复此类问题。

【讨论】：

【参考方案9】：

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

尝试以下方法：

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

【讨论】：

【参考方案10】：

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

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

为我解决了问题。

【讨论】：

【参考方案11】：

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

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

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

【讨论】：

以上是关于IE 9 和 IE 10 时不时无法在输入文本框中输入文本的主要内容，如果未能解决你的问题，请参考以下文章

如何禁用 IE10 插入文本框的清除按钮？

如何在兼容模式下从 IE10 文本框中删除清除按钮（“X”按钮）？

左对齐文本输入 onblur (IE 8 & 9)

selenium webdriver在 ie 中无法定位元素和ie文本框字符输入过慢

javascript 文本框中,判断回车键触发事件 兼容IE&FireFox

WIN10系统删除桌面IE图标