You are here

User Interface

Make HTML Form Navigation Behave Like A Spreadsheet

Corey Pennycuff's picture

If necessity is the mother of invention, then clients are the source for interesting programming problems, and the need to solve those problems are a never-ending source of discovery for programmers. Such was the case for a recent project in which a lot of data had to be entered quickly and efficiently into an HTML form. The customer was accustomed to using spreadsheets, and wanted, most specifically, for the form to replicate the action of a spreadsheet when pressing enter. To put it plainly, they wanted the focus to go to the next row when they pressed enter.

The normal behavior for a form is that the browser will submit the form when enter is pressed (unless the element is a multi-line text area). Preventing this is easy enough using jQuery's keypress() event and listening and acting on the keyboard input as appropriate.

Subscribe to RSS - User Interface