I have a question that has me stumped. I am building several data entry forms and our users want a carriage return to move the cursor to the next field. This is for speed - they are using their right hand for number entry and the enter key is easily available - their left hand is holding or keeping place on paper so reaching across for the tab key is 'inconvenient'. Also some fields are populated with a hand scanner which includes something (line feed or carriage return) after the scan - in some forms they are using, the cursor jumps to the next field after the scan. How do I do this? I have goggled until I am blind and can't find any help on this issue. This can't be the only time in the history of the world that someone has wanted this.
You know what I like about this problem - it takes what is the natural function of a FORM element and completely breaks it; but, it does it in such a way that makes the form ultimately more usable for the target audience. So often in web development, we build forms that are designed to work in a traditional way with very little thought about the people who will actually be using them after the product is launched. So, before we get into this, thank you so much for really aligning your goals with target audience - it makes me proud.
Ok, that said, the best part of this solution is also the hardest part to deal with; by default, hitting the Enter key while focused in a form field will cause the form to submit. We need to remove that functionality, but not fully. This wasn't really dicussed in the question, but I am going to make the decision that if we are on the last input, then we want the submit to actually work. So, if we are currently typing in field one and the we hit enter, we want to "tab" to field two. However, if we are currently typing in field "N" and we hit enter, we want to submit the form (rather than looping back to the first field).
There's actually a lot less code here than appears. The commenting and explanation make it bulky, but in reality, this is like 10 lines of code. When the DOM loads, jQuery is finding all the fields that have the class "input-field". It then binds a key down event listener to each of those fields which will monitor the keys presses looking for the enter key (key code 13).
I hope this points you in the right direction.
Want to use code from this post? Check out the license.