html - Workaround for file input label click (Firefox)

Question

<label for="input">Label</label><input type="file" id="input"/>

In Firefox 7 it is not possible to trigger the open file dialog by clicking on the label.

This SO question is very similar but that's green checked with it's a bug in FF. I'm looking for a workaround.

Any ideas?

Answer 1

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 to document 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 to event.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.