IEでのファイル入力動作

Question

ファイル入力クリックの処理のChromeとIEの動作の違いに気付きました。

jsfiddleの例 ここ.

Chromeでは、入力（テキストまたはボタンビット）のどこにでもクリックすると、ファイルダイアログがトリガーされます。

IE（7でテスト）では、テキストビットではなく、実際のボタンをクリックする必要があります。

問題は、通常のテキストボックスの上に透明なファイル入力を使用していることです。テキストボックスをクリックすると、ダイアログが開く必要があります。 Chromeでは、入力の合計サイズは私のテキストボックスと同じサイズであるため、これは正常に動作しています。

IEでは、ユーザーが透過ファイル入力の実際のボタン部分をクリックする必要があるため、適切に機能しません。

これを修正する方法のアイデアはありますか？

ありがとう

Answer 1

クリックイベントをトリガーする方法を見つける必要があります file 入力ボックス..

ファイルボックスにクリックイベントを発行する基礎となるテキストボックスにクリックハンドラーを追加するかもしれません。

例： http://jsfiddle.net/mqbrv/

Firefoxでは機能しません（ただし、デフォルトのアクションで十分です）そしてオペラ（何も機能しない場所).

Answer 2

これらの人たちがそれをどのように行ったかを見てください： http://www.filamentgroup.com/lab/jquery_custom_file_input_book_desiging_with_progressip_enhancement/

戦略は同じです。標準のファイルを標準のファイルにオーバーレイし、ユーザーに標準のファイルと対話させます。

彼らは、IEとオペラのクリックをサポートするための小さなハックを書きました。JQueryを使用してクリックイベントを明示的にバインドしました。

見る： http://dwpe.googlecode.com/svn/trunk/fileinput/js/jquery.fileinput.js （52行目）