title: IE focuses submit button when submitting form with enter key
body: <p>I currently have a form in one of my applications which uses a hidden button as a fix for problems with the numeric keyboard on Android. Essentially, either pressing the enter key or focusing the button will submit the form. </p>
  
  <p>Pressing enter works in Chrome (desktop), Firefox (desktop), and Safari (iOS) and only submits the form once. In IE, the browser is submitting the form twice, so I can only assume that it is focusing the submit button when the user presses enter.</p>
  
  <p>Here's an example to demo this. In Chrome and other browsers I've tested, it will simply clear the box. In IE, it will alert for "Invalid quantity." </p>
  
  <p><a href="http://jsfiddle.net/2rYaZ/2/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form data-bind="submit: SubmitQuantity"&gt;
      Quantity: 
      &lt;input id="quantity" type="number" data-bind="value: Quantity, valueUpdate: 'afterkeydown'"/&gt;
      &lt;button type="submit" data-bind="event: { focus: SubmitQuantity }" class="hidden_button"&gt;&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.hidden_button {
      width: 0px;
      height: 0px;
      font-size: 0px;
      border: 0px;
      left: -9999px;
      padding: 0px 0px 0px 0px;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>var viewModel;
  
  function ViewModel() {
      var self = this;
      self.Quantity = ko.observable('');
      self.SubmitQuantity = function() {
          if (isNaN(self.Quantity())) {
              alert('Invalid quantity');
              return;
          }
          self.Quantity(undefined);
      };
  }
  
  viewModel = new ViewModel();
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>Is there a way to prevent IE from doing this double submission that is caused by focusing the hidden field?</p>