I have a file input field with opacity: 0; and filter: alpha(opacity: 0); that sits ontop of a large div that I use as a button to select a file, the selected filename is displayed below the button.
All works fine, but when you set the width property of the file element (in this case, the width of the DIV which is underneath it) in IE, part of that width is the text area of the file input. Ofcourse, IE does their own thing, and unlike every other browser, the text-area of the element has to be double-clicked to open the browse dialog. Firefox & Safari will act on a single-click of the text part of the element. I thought I had a workaround since IE allows you to invoke the .click() event on the element.
I tried this:
<input type="file" onclick="this.click();" />
which did nothing, so I tried this:
<input type="file" onmouseup="this.click();" />
Which worked, and the browse dialog was shown with a single click of the text area of the element. But, for some reason when the form is submitted, if there was a file selected, the form would not submit, nothing would happen. If no file was selected, the rest of the form would be submitted.
So now I am back to square one and the left half of my Select File button has to be double clicked to pick a file and the right half can be single clicked. I can’t think of any other way to get IE to react to a single click of the element. I tried using the onfocus event to trigger .click() on the element also, which works, but since this upload dialog will be the only thing on the page, and the <input type="file" /> is the first input element being rendered, the click event is triggered when the page loads.
So then I tried attaching to the onload event of the body, and setting focus to something else, but this was too late and focus had already been given to the file input and the browse dialog already opened. I know I am getting close with the onfocus, is there a way to keep the element from having focus when the page loads? Or is there another way to do this that anyone can think of?
Thanks!
[update]
I tried playing with the onfocus again and unfortunately, I was wrong and focus is called to the file element again when the form is submitted, halting the submission and opening the browse dialog again
My favorite solution to formatting html inputs: http://pixelmatrixdesign.com/uniform/