File input behaviour in IE

Question

I have noticed a difference in behaviour between chrome and IE of handling file input clicks.

jsFiddle example here.

In Chrome, clicking anywhere on the input (text or button bit) triggers the file dialogue.

In IE (testing on 7), you have to click on the actual button, not the text bit.

The problem is that I'm using a transparent file input on top of a regular text box. Clicking on the text box should open the dialog. In Chrome this is working fine, as the total size of the input is the same size as my text box.

In IE it doesn't work properly as the user needs to be clicking on the actual button part of the transparent file input.

Any ideas of how to fix this??

Thanks

Answer 1

Have a look at how these guys have done it: http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

The strategy is the the same, overlay a custom designed file input over a standard one and get the user to interact with the standard one.

They have written a small hack to support the click for IE and Opera, using jQuery to bind a click event explicitly.

See: http://dwpe.googlecode.com/svn/trunk/fileinput/js/jQuery.fileinput.js (Line 52)

Answer 2

You need to find a way to trigger a click event on the file input box..

Maybe adding a click handler on the underlying textbox which issues the click event to the file box.

example: http://jsfiddle.net/MqbrV/

It does not work in Firefox (but the default action should be enough) and Opera (where none works).