ホームページ > 記事 > ウェブフロントエンド > IE6 のポップアップ Iframe レイヤーのテキスト ボックスは、入力 focus_javascript スキルの取得に「頻繁に」失敗します。
会社の WEB プロジェクトの要件は、FF3 および IE6/7/8 と互換性がある必要があります。この記事では、IE6 でのバグについて説明します。
プロジェクトでは、自己カプセル化されたポップアップ レイヤーを作成しました。原則として、最初にマスク レイヤーを動的に追加し、次に DIV (テーブル) レイヤーを動的に追加します。 (ポップアップ レイヤーの PNG 半透明の境界線効果を作成するため)、IFrame が DIV に動的に追加され、この Iframe ページは既存の HTM ファイルを指します。
この HTM ファイルにテキスト入力ボックスなどのフォーム要素が含まれている場合、IE6 では問題が発生します。
テストグループの人々は、ポップアップレイヤーを開いた後、テキストボックスのフォーカスを取得できないことが「頻繁に」あると言いました。つまり、テキストボックスはフォーカスを取得できず、入力マークを表示できません。マウスがクリックすると、透明なレイヤーで覆われているように見えます。しかし、場合によってはそれが正常であり、断続的な精神障害と表現されることもあります。出現確率が50%の台もあれば、30%の台もある。
テストと分析を行うことは避けられません。
仮想マシン IE6 でテストした後、テスト グループの人々が言ったことは確かであることがわかりました。
テキスト ボックスを除いて、その周囲のテキストはマウスで通常どおり選択でき、テキスト ボックス自体を含むその周囲の要素も onclick イベントに応答できるため、余分なオーバーレイはないと確信しています。 , しかし、どのようにクリックしても入力フォーカスを取得できません。 (テキスト ボックスは readOnly に設定されていない、または無効になっています)
ただし、この Iframe を右クリックして更新したり、この Iframe で 'TAB' キーを押したりするなど、いくつかの小さな操作によって通常に戻ることがあります。 iframe で任意のテキスト ボックスに移動します。この時点では、すべてのテキスト ボックスをクリックすると通常どおりフォーカスを取得できます。なんて変態なんだ!
これが私たちのプログラムでは解決できない IE6 のバグであるとは言えません。リーダーたちはこれに耳を貸さないでしょう。
多くの努力を重ねた結果、まだ解決策が見つかりません。
任意の (通常は最初の) テキスト ボックスの focus() メソッドを手動で呼び出すと、すべてのテキスト ボックスを正常な状態に戻すことができることがわかりました。そこで、Iframe のページの最後にある最初のテキスト ボックスを取得し、その focus() を呼び出すパブリック スクリプトを作成しました。何百回もテストしましたが、フォーカスを取得できない状況や問題に遭遇することはありませんでした。解決されました。