单击文件输入标签的解决方法 (Firefox) [英] Workaround for file input label click (Firefox)

问题描述

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

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

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

这个问题非常相似，但>这是FF中的一个错误.我正在寻找解决方法.

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

有什么想法吗?

推荐答案

感谢您的问答...帮助我.

thank you for this q&a... helped me out.

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

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();
    }
  });
}

备注

• 使用 document.ready ($(function() {...});) 在任一解决方案中都是不必要的.jQuery.fn.live 在@marten-wikstrom 的情况下处理了这个问题；在我的示例中，显式绑定到 document 确实如此.
• 使用 jQuery.fn.on... 当前推荐的绑定技术.

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

• 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)

将 event.target 检查更改为 event.currentTarget，允许初始单击 中的:

change event.target check to event.currentTarget, allowing for initial click on the <em> in:

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

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

using the label element's control attribute for cleaner, simpler, spec-base form field association.

这篇关于单击文件输入标签的解决方法 (Firefox)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！