IE需要多次点击才能提交 [英] IE requiring multiple clicks on submit

问题描述

我有一个带有文件控件的窗体和一个单独的按钮，导致点击事件在该文件域上触发。问题是如果你点击按钮，那么页面底部的提交按钮需要在IE中点击两次。如何防止这种情况发生？

其中最简单的形式是以下代码：

HTML：

 < form action =＃> 
< input type =fileid =myFile/> 
< button id =myButton> **我的选择**< / button> 
< input type =submitvalue =Submit/> 
< / form> 
  

JavaScript：

 <点击（函数（e）{
 e.preventDefault（）; 
 $（'＃myFile'）; code> $（function（）{
 $（'＃myButton' ）.click（）; 
}）; 
}）; 
  

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

在IE中，点击我的选择按钮将会然后需要两次点击提交才能真正发布。 （通常myFile将被隐藏，但为了演示的目的，我将它保留为可见。）

测试步骤：

• 案例1：
  
  
  
  1. 刷新页面。
  
  
  2. 点击提交。确认提交（通过开发工具）。
  
  



• 案例2：
  
  
  
  1. 刷新页面。
  
  
  2. 点击文件输入旁边的浏览...，选择文件。
  
  
  3. 点击提交。确认提交（通过开发工具）。 （有时甚至需要点击两次！）
  b $ b
  4. 刷新页面。
  
  
  5. 点击我的选择，选择文件。
  
  
  6. 点击提交。
  在情况2和3中，有时.click（）或.submit（）事件也不会被触发。
  
  
  

  另外一个有趣的方面是，在页面上输入一个文件。如果有三个，并且您做了上述三次，则必须单击提交按钮四次才能提交该页面。
  

  解决方案

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

   < label for =myFile> ** My Label **< / label>< br /> 
  < input type =fileid =myFilename =myFile/> 
    

  据我了解，这是由于IE9安全限制造成的

  
  

  I have a form with a file control and a separate button that causes the click event to fire on that file field. The problem is that if you click the button, then the submit button at the bottom of the page requires two clicks in IE. How do I prevent that?

  In it's most simply form, here's the code:

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

  A more in-depth sample at JSFiddle: http://jsfiddle.net/XPqQB/6/

  In IE, clicking on the "My Choose" button will then require two clicks on "Submit" to actually post. (Usually "myFile" would be hidden, but for demo purposes I'm leaving it visible.)

  Test steps:

  • Case 1:
    1. Refresh page.
    2. Click "Submit". Confirm submission (via dev tools).

  • Case 2:
    1. Refresh page.
    2. Click "Browse..." next to file input, select file.
    3. Click "Submit". Confirm submission (via dev tools). (Sometimes even this requires two clicks!)

  • Case 3:
    1. Refresh page.
    2. Click "My Choose", select file.
    3. Click "Submit". No action.

  You can also see that in case 2 and 3 that sometimes the .click() or .submit() events are not being triggered either.

  A further interesting aspect of this is when there's more than one file input on the page. If there are three, and you do the above three times, you have to click on the submit button four times total to submit the page.

  解决方案

  the solution is to use a label that points to the file input, you can apply any styling to the label and it will work

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

  as i understand it is caused by IE9 security restrictions

  这篇关于IE需要多次点击才能提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！