html - 单击文件输入标签的解决方法 (Firefox)

Question

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

在 Firefox 7 中，无法通过单击标签来触发打开文件对话框。

This SO question非常相似，但它是绿色的，它是 FF 中的一个错误。我正在寻找解决方法。

有什么想法吗？

Answer 1

感谢您的问答...帮我解决了问题。

我对@marten-wikstrom 解决方案的变体:

if($.browser.mozilla) {
  $(document).on('click', 'label', function(e) {
    if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
      $(this.control).click();
    }
  });
}

笔记

• 在任一解决方案中都不需要使用 document.ready ( $(function() {...});)。 jQuery.fn.live在@marten-wikstrom 的案例中处理这个问题；明确绑定(bind)到 document在我的示例中。
• 使用jQuery.fn.on ...当前推荐的绑定(bind)技术。

• 添加了 !== 'INPUT'检查以确保执行不会陷入此处的循环:

  <label>
    <input type="file">
  </label>
  

  (因为文件字段点击会冒泡回到标签)

• 更改 event.target查看event.currentTarget , 允许初始点击 <em>在:

  <label for="field">click <em>here</em></label>
  

• 使用标签元素的control更清晰、更简单、基于规范的表单字段关联的属性。