Workaround for file input label click (Firefox)
thank you for this q&a... helped me out.
my variation of @marten-wikstrom's solution:
if($.browser.mozilla) {
$(document).on('click', 'label', function(e) {
if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
$(this.control).click();
}
});
}
notes
- using document.ready (
$(function() {...});
) is unnecessary, in either solution.jQuery.fn.live
takes care of that in @marten-wikstrom's case; explicitly binding todocument
does in my example. - using
jQuery.fn.on
... current recommended binding technique. added the
!== 'INPUT'
check to ensure execution does not get caught in a loop here:<label> <input type="file"> </label>
(since the file field click will bubble back up to the label)
change
event.target
check toevent.currentTarget
, allowing for initial click on the<em>
in:<label for="field">click <em>here</em></label>
- using the label element's
control
attribute for cleaner, simpler, spec-base form field association.
I came up with a feasible workaround:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("label").click(function () {
$("#input").click();
});
});
</script>
<label for="input">Label</label><input type="file" id="input"/>
Quite strange that FF allows you to simulate a click on a file input. I thought that was considered a security risk...
UPDATE: This is a generic workaround:
<script type="text/javascript">
$(function () {
if ($.browser.mozilla) {
$("label").live("click", function (event) {
if (event.target == this) {
$("#" + $(this).attr("for")).extend($("input", this)).first().click();
}
});
}
});
</script>