I was pretty confused by this particular behavior from Google Chrome. In my ASP.NET pages, when I pressed Enter inside some form fields, Chrome reloaded the entire page, but FireFox and Internet Explorer did nothing.

I am aware of the HTML specification, which says that pressing Enter inside a form field should submit the form. However, I was particularly confused between differences in browser behavior on this aspect. Keeping in mind the faithful implementation of web standards by Firefox, I would have atleast expected FF to demonstrate the same behavior (submitting the form on pressing Enter). However, it doesn’t, which leaves me unsure as to whether this is actually required by the standards or not.

The difference in browser behavior is demonstrated by the attached file below: chrome-enter-bug.aspx. Run this ASP.NET page and access it through different browsers and try pressing Enter inside the text-fields, and see which browser submits the page. I am using Ext.Net (Coolite) controls in this page, because this problem was occurring for me in ExtJs fields, but you should be able to verify the issue from the presence of a stand-alone HTML text field also.

Now, I needed a solution for this, as I did not want the form to be submitted on pressing Enter. Below, I present 3 solutions for this problem, one specific to Ext.Net/ExtJs fields, the second for HTML fields, and the third one is a more generic solution.

1. For Ext.Net/ExtJs fields: Add the following javascript code to the page:
   {syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }Ext.override(Ext.form.Field, {
   fireKey: function(e) {
   if (e.isSpecialKey()) {
   this.fireEvent(‘specialkey’, this, e);
   if (e.keyCode == e.ENTER && this.suppressEnter) {
   e.stopEvent();
   }
   }
   }
   });{/syntaxhighlighter}
   Here, I have overriden the private fireKey method of the Ext.form.Field class. You would need to add a custom config option, suppressEnter and set its value to true on the ExtJs/Ext.Net fields on which you want to suppress Enter.
2.  For HTML fields: Add the following javascript code to the page:
   {syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }function keyPressed(e) {
   var keycode;
   if (window.event) {
   keycode = window.event.keyCode;
   }
   else if (e) {
   keycode = e.which;
   }
   else {
   return (false);
   }
   return (keycode != 13);
   }{/syntaxhighlighter}Your HTML input field should look like the following in this case:

   <input type="text" onkeypress="return(keyPressed(event));" />

    

3. A generic solution: Add the following javascript to your page:
   {syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }var nav = window.Event ? true : false;
   if (nav) {
   window.captureEvents(Event.KEYDOWN);
   window.onkeydown = NetscapeEventHandler_KeyDown;
   } else {
   document.onkeydown = IEEventHandler_KeyDown;
   }

   function NetscapeEventHandler_KeyDown(e) {
   if (e.which == 13 && e.target.type != ‘textarea’ && e.target.type != ‘submit’) { return false; }
   return true;
   }

   function IEEventHandler_KeyDown() {
   if (event.keyCode == 13 && event.srcElement.type != ‘textarea’ && event.srcElement.type != ‘submit’)
   return false;
   return true;
   }{/syntaxhighlighter}

There are pros and cons for each of the above solutions. The first and second solution require you to specify additional configuration on each individual control on which you want to suppress Enter, which means you can choose these for selectively suppressing Enter on ExtJs/Ext.Net/HTML controls.

The third solution is a blanket suppress for Enter for all non-submit and non-textarea HTML controls on the page, and would even work for ExtJs/Ext.Net controls. This implies you would not be able to allow Enter to propagate on select controls.

You should be able to modify any of these code samples for your needs. The first attached file below demonstrates the problem, the second demonstrates the 1) and 2) solutions above, while the third attached file demonstrates the 3) solution.