117

This logic is firing when pressing "Enter" in the "Amount" input, and I don't believe it should (it doesn't in Chrome). How can I prevent this, and if not prevent it in IE, handle it so that the logic in the click event does not fire.

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

Script

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • Jquery: 1.7.2
  • IE 9
  • (Works in Chrome)
1
  • 1
    Contrary to the question, this just happened to me with Chrome and Firefox. Same fix though (button type).
    – Tim Grant
    Commented Jun 24, 2016 at 18:36

6 Answers 6

343
+500

I had the same problem and solved it by adding type="button" attribute to the <button> element, by which IE thinks the button as a simple button instead of a submit button (which is default behavior of a <button> element).

2
  • 1
    "Tip: Always specify the type attribute for the <button> element. Different browsers may use different default types for the <button> element." from w3schools.com/tags/att_button_type.asp
    – elnino3800
    Commented Feb 13, 2015 at 13:40
  • 1
    This did work for me, however I also had to prevent the Enter key from submitting the form that my <input> is in, because in my case we don't want users automatically hitting Enter after typing in a value in this one field to submit the entire form, so just in my case I also needed something like on(theInputElement, 'keyDown', function (e) { if (e.key === 'Enter') { e.preventDefault(); } }); .. thought this might help others in the same situation. (I'm using Dojo's dojo/on here, jquery would work just as well)
    – Neek
    Commented Feb 9, 2017 at 10:24
34

I ran into this problem today. IE assumes that if you press the enter key in any of the text fields, you want to submit the form -- even if the fields are not part of a form and even if the button is not of type "submit".

You must override IE's default behavior with preventDefault(). In your jQuery selector, put in the div that contains the text boxes you want to ignore the enter key -- in your case, the "page" div. Instead of selecting the whole div, you could also specify the text boxes you want to ignore specifically.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});
0
4

I was having this issue with ASP.NET WebForms:

<asp:Button />

This can NOT be solved by just adding type="button" because ASP.NET replaces it with type="submit" (you can see this behavior in the browser if you inspect the element.)

The correct way to do this in asp.net is to add

<asp:Button UseSubmitBehavior="false" />

to the button. ASP will automatically add the type="button" attribute.

3

IE thinks any button element is a submit button (whether you have a form or not). It also handles the press of the Enter key in a form element as an implicit form submission. So, since it thinks you are trying to submit your form, it figures it'll help you out and fire the click event on (what it thinks is) the submit button.

You can attach a keyup event to either the input or the button and check for the Enter key (e.which === 13) and return false;

0
1

A jQuery based solution that does this for every button is:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

However the click event will still bubble up to parent elements for some reason...

0

For Chrome you can add <button type="submit" style="display:none"/> Because In chrome default button type is "submit'

For IE , I have tried to same with type="button"(In IE default button type is "button") But didn't worked well.

So here is the solution. In HTML add (keypress)=xxx($event) in your form. In TS,

xxx(event) {
 if(event.key === 'Enter' && event.target.type !== 'submit')
event.preventDefault():
}

The above will work in all scenarios like cross browsers,normal click, and tab flow.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.