IE 需要多次点击提交答案

【问题标题】：IE requiring multiple clicks on submitIE 需要多次点击提交
【发布时间】：2013-11-07 21:12:54
【问题描述】：

我有一个带有文件控件的表单和一个单独的按钮，该按钮会导致在该文件字段上触发 click 事件。问题是如果点击按钮，那么页面底部的提交按钮需要在IE中点击两次。我该如何预防？

这是最简单的形式，代码如下：

HTML：

<form action="#">
  <input type="file" id="myFile" />
  <button id="myButton">** My Choose **</button>
  <input type="submit" value="Submit" />
</form>

JavaScript：

$(function() {
    $('#myButton').click(function(e) {
        e.preventDefault();
        $('#myFile').click();
    });
});

JSFiddle 上的更深入示例：http://jsfiddle.net/XPqQB/6/

在 IE 中，单击“我的选择”按钮将需要单击“提交”两次才能实际发布。（通常“myFile”会被隐藏，但出于演示目的，我将其保留为可见。）

测试步骤：

案例 1：
1. 刷新页面。
2. 点击“提交”。确认提交（通过开发工具）。
案例 2：
1. 刷新页面。
2. 点击文件输入旁边的“浏览...”，选择文件。
3. 点击“提交”。确认提交（通过开发工具）。 （有时甚至需要点击两次！）
案例 3：
1. 刷新页面。
2. 点击“我的选择”，选择文件。
3. 点击“提交”。 没有动作。

您还可以看到，在情况 2 和 3 中，有时 .click() 或 .submit() 事件也不会被触发。

另一个有趣的方面是当页面上有多个文件输入时。如果是三个，并且你做了以上三遍，你必须点击提交按钮四次才能提交页面。

【问题讨论】：

在 IE10 中对我来说很好。
嗯，我已经在 IE11 中测试了你的小提琴，它似乎适用于所有 3 种情况。只需单击提交按钮即可。您测试了哪些版本的 IE？
这很奇怪，因为我使用的是没有扩展的 IE 10，它不会让我提交。

标签： javascript jquery html forms

【解决方案1】：

解决方案是使用指向文件输入的标签，您可以将任何样式应用于标签，它会起作用

<label for="myFile">** My Label **</label><br/>
<input type="file" id="myFile" name="myFile" />

据我了解，这是由 IE9 安全限制引起的

【讨论】：