問題を示すために、HTML の最も基本的なバージョンを貼り付けています。
<body>
<form>
<input type="text" name="myInputBox" id="myInputBoxID"/>
</form>
<object type="application/x-shockwave-flash" data="http://www.michaelbechara.com/interiordesign.swf" style="margin: 0;width:100%;height:100%;position:absolute;left:0px;top:0px;z-index:-1">
<param name="movie" value="http://www.michaelbechara.com/interiordesign.swf" />
</object>
</body>
これは jsFiddle でも同じです: http://jsfiddle.net/BKNFG/
基本的に、テキスト入力と、スタイリングが適用されたフラッシュ コンテンツがあります。Flash コンテンツでこの特定の CSS スタイルの組み合わせ (100% の幅と高さ、および絶対配置) を使用しているときに、入力ボックスで奇妙な問題に直面しています。この動作は Firefox でのみ発生します (バージョン 16.0.2 を使用しています)。
問題を再現するには:
- 入力ボックスにフォーカス/カーソルを置き、いくつかの文字を入力します
- ボックスからフォーカスを外さずに、テキスト入力ボックス内をもう一度クリックします
- さらにテキストを入力してみてください
フォーカスを別のものに移動し、フォーカスをテキスト入力コントロールに戻さない限り、これ以上テキストを入力することはできません。
swfobject や埋め込みコードのバリアントなど、他のさまざまな方法で Flash コンテンツを埋め込む方法を試しました。これは Firefox のバグかもしれないと思いますが、フォーカスを外さなくてもテキスト入力を機能させる解決策はありますか?