IE7(だけかな?)で怪奇現象!!!

thickboxっていうライトボックス風な表示を実現できるjQueryのプラグインであるわけですが、それでHTMLページを表示した後にテキストボックスの入力ができなくなるという問題が発生してました。

  • thickboxはHTMLページをIFRAMEを作って表示する
  • 「閉じる」ボタンを押すと、そのIFRAMEを削除する。
  • IFRAMEで表示するHTMLページにテキストボックス(input)があると、閉じた後にテキストボックスに入力ができなくなる。
  • タブを押してフォーカスを移動するとできるようになる。

このことから、きっとフォーカスが子フレームに奪われた状態なのだろうなぁ・・・と思ったので・・・↓こんな感じの検証用ページを作って確認してみました。

【親HTML】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
		<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="inputLock.js" type="text/javascript"></script>
		<title>テキスト入力が効かなくなるかも</title>
	</head>
	<body>
		<h1>テキスト入力が効かなくなるかも</h1>
		<p>
			IE7でフォーカスがらみでテキスト入力ができなくなる問題が出ているので、その検証用。
		</p>
		<hr />
		<div>
			<h2>使い方</h2>
			<ol>
				<li>まず、下記のテキストボックスに入力できることを確認。</li>
				<li>IFRAMEを開くボタンをクリックし、IFRAMEを2つ開く。</li>
				<li>2つ目のIFRAMEの中のテキストボックスにフォーカスを移した状態で、IFRAMEを閉じるボタンで閉じる。</li>
				<li>このドキュメントのテキストボックスに入力ができなくなる!!</li>
				<li>まあ、しばらくすると入力できるんだけどね。どうやら開放あたりが詰まっているようだ。</li>
			</ol>
			<p>※ この「入力できない状態」が、何かの原因でずっと起きるケースがあるっぽい。</p>
		</div>
		<hr />
		<div>
			<h2>検証フォーム</h2>
			テキスト:<input type="text" id="text1" />
			<div><input type="button" id="openIFrame1" value="IFRAMEを開く" /></div>
			<div id="iFrameWindow1"></div>
			<div><input type="button" id="closeIFrame1" value="IFRAMEを閉じる" style="display:none;" /></div>
		</div>
	</body>
</html>

【inputLock.js】

$(document).ready(
  function()
  {
    $("#openIFrame1").click(
      function()
      {
        $("#iFrameWindow1").append('<iframe src="./iframe.html" style="width:200px; height:200px;"></iframe>');
        $("#iFrameWindow1").append('<iframe src="./iframe.html" style="width:200px; height:200px;"></iframe>');
        $("#closeIFrame1").show();
      });

    $("#closeIFrame1").click(
      function()
      {
        $("#iFrameWindow1").text("");
        $(this).hide();
      });
  });

【iframe.html】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
		<title>テキスト入力が効かなくなるかも</title>
	</head>
	<body>
		<h1>iframe</h1>
		<input type="text" id="text2" /><br />
	</body>
</html>

使い方は、親HTMLに書いたとおり。現象が起きたり起きなかったりするのは、しばらくすると元に戻ることと関係があるのかもしれない。
実際の問題のほうは、これのひどい版だと思って、ほぼ間違いなさそう。。。

しばらく悩んでから、「親にフォーカスを返してあげればいいのか。」と思い、こんな対応をしたところ、うまくいきました。


【対応JS】

    $("#closeIFrame1").click(
      function()
      {
        var dummyText = $('<input type="text" />');
        $("body").append( dummyText.get() );
        dummyText.focus();
        $("#iFrameWindow1").text("");
        $(this).hide();
        dummyText.remove();
      });

bodyにダミーのInputをつっこんで、フォーカスを渡して、消す。

・・・なんか、変な対応ですが、これでうまくいくからこれでいいか・・・いい・・・のか?

なんだか、変な現象にぶつかるなぁ・・・。。。