Fixing the Enter Keypress Event in ASP.NET with jQuery

One of the most frustrating things about working with .NET from a front-end developer’s viewpoint is the Single Form Model. Enclosing an entire website or web-application in one single

element poses a number of accessibility and usability problems surrounding form input and usage. One of these is ensuring the correct default actions are assigned to sets of input fields when the enter key is used.

Traditionally, the default action for a is to fire the first submit button found within the current element. Every form has one default action.

Striking the enter key within a text input field should submit the current set of—logically grouped—fields; this is the expected behaviour. For pages with multiple forms and actions, this is easily separated by having multiple elements, each with their own submit buttons and actions. Each form operates independently, has its own default action, and doesn’t interfere with other forms.

In the Single Form Model, the presence of just one element, means that different default actions cannot be easily separated. Every input field on the page is automatically tied to just one default action – the first submit button on the page.

Take a blog site as an example – like this very page! It has a search form at the top, with associated submit button, a comment form further down the page and perhaps another form for signing up to a newsletter. Implemented with the Single Form Model, only the search form will produce the correct behaviour as it introduces the first submit button on the page. All subsequent fields will be tied to this same button as their default action – submitting a comment by pressing enter would cause the search form to submit, as would signing up to a newsletter. Not particularly useful.

Read More..