web-dev-qa-db-ja.com

IE 9およびIE 10は、入力テキストボックスにテキストを入力できない場合があります

内部にiframeがあるWebページがあります。場合によっては、iframe内の入力テキストボックスコントロールがロック/フリーズされます。ユーザーはテキストを入力できません。ただし、テキストボックスをフォーカスしてフェードすることはできません。入力コントロールを無効にするコードはなく、これは常に発生するわけではありません。現在まで、これはIE 9およびIE 10.でのみ発生します。FirefoxおよびChromeは問題ありません。

ページの仕組みの簡単な説明は次のとおりです。

  • 親ページにボタンがあります。クリックすると、最初からiframeが作成され、表示されます。これはJavascriptによって行われます。

  • ここでも、iframeを閉じるためのボタンがあります。クリックして
    は、親ページのDOMからiframeを削除します。

必要に応じてさらに情報が必要な場合はお知らせください。前もって感謝します。

javascripthtmlinternet-explorerinternet-explorer-9internet-explorer-10
26
Pyae Phyo Aung

このバグは非常に煩わしく、さらに悪いことに、Googleで見つけられる情報はほとんどありませんでした。

MicrosoftからIE9についてのリンクは1つしかありませんが、IE10/IE11にはまだ問題があり、再現がはるかに簡単です。

この問題を説明するためのフィドルを作成しました

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

M $がこの問題を何年もの間修正することがそれほど難しいのはなぜですか？

3つの回避策があるはずです

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

    それがすべての場合に役立つかどうかはわかりませんが、試してみる必要があります

35
William Leung

JQueryによるソリューション iE11で働いた 私にとっては、他の解決策ではありません。

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

IE9/10で機能する他のソリューションは、削除する前にiframe srcを空に設定することでした

iframe.src=""

ただし、1.11.1より古いバージョンのjQueryを使用している場合、これによりIE11で「アクセスが拒否されました」という例外が発生します。

一部のリンク：詳細については、jQueryは、iframeにコンテンツを表示していたDialog.jsプラグインのこの問題も修正しました： http://bugs.jqueryui.com/ticket/9122

iE11のjQueryバグ修正「アクセス拒否」エラー： http://bugs.jquery.com/ticket/14535

5
JcAspes

メインページにフォーカスを戻すことで、このバグをなんとか修正できました。これまでに行ったことは、メインページに非表示に設定されたHTML入力テキストボックスを配置することです。 iframeが閉じたら、フォーカスをそのテキストボックスに戻します。

このバグの詳細については、次のリンクを参照してくださいIEバグ。

link1

link2

4
Pyae Phyo Aung

IE 11。

このコードをiframe内に追加することで解決しました。

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

もちろん、これはiframeを制御できない場合は機能しません。

3
Fyodor

これはIE11で私のために働きました、

  • 問題の原因（IEが愚かであることを除いて）：
    • フォーカスされた入力要素がiframe内の表示から削除されます（css表示プロパティ）
  • 問題：
    • テキスト入力要素をクリックすることはできませんが、タブで移動することはできます。
  • 回避策：
    • 入力フィールドを非表示にする前に、既知の可視要素をfocus（）する必要があるため、入力フィールドから表示を削除する前の行には、次の行があります：document.body.focus();
3
GM-Script-Writer-62850

他の人が言ったことに加えて、iframeの一部の入力にフォーカスがあり、それが閉じられて他のすべての入力がフォーカスを失う場合、それは実際に問題です。実際、要素にフォーカスを設定するスクリプトを用意することで問題が解決します。しかし、私の入力の一部が無効になっているため、これは機能していませんでした。だから私のために働いた解決策は以下です

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

bootstrap modalを使用していて、モーダルに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();

});
2
Narain Mittal

IE 8）でメモリリークに対処するために、以下のプラグインを最初に作成しましたが、この問題も修正されています。

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

1
portlandrock

私のために動作するJavascriptを使用した簡単なソリューションで、他のブラウザでは副作用は見られませんでした。

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

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

とにかく、MSが上位バージョンでもこのような問題を修正できないのはかなり悲しいことです。

1
squirrelInTheBarel

IE11、angularjs、IFrameで同じ問題が発生しました。私のテンプレートはng-switchビューモードを変更します。表示モードの1つにIFrameが含まれています。 IFrameを含むビューモードから切り替える瞬間：

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

私のために問題を解決しました。

0
Frode

私もこの問題に苦しんでいました。 William Leungが指摘したように、IEには、DOMからのIframeオブジェクトの削除に関するバグがあります。

以下を試してください：

$(someDivWithIframe).empty().remove();
0
Teddy Han

これは私のために働いた解決策です、このページの他のすべてを試しました！ jQueryが必要ですが、必要な場合はネイティブJavaScriptで書き直すことができると確信しています。

他の多くのソリューションと同様に、変更するアクセス権があることを前提として、これをiframeのsourceに追加する必要があります。

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

0
Waggers