文件输入标签点击的解决方法(Firefox)

Question

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

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

这个问题非常相似,但是用绿色检查它是FF中的一个错误.我正在寻找一种解决方法.

有任何想法吗？

Answer 1

谢谢你这个q&a ...帮我解决了.

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

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

笔记

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

• 添加了!== 'INPUT'检查以确保执行不会在循环中被捕获:

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

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

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

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

• 使用label元素的control属性来实现更清晰,更简单,基于规范的表单字段关联.