Prevent Early Form Submission by Hijacking the Enter Key

A customer asked me to create a timecard form a few years ago. Everything with the form worked great but users would mistakenly press the enter key before their form was completed. They asked that I make the enter key move the cursor to the next input instead of submitting the form. This is how I'd do that using MooTools JavaScript.

The MooTools JavaScript

var inputs = $$('input.hijack'); $each(inputs,function(el,i) { el.addEvent('keypress',function(e) { if(e.key == 'enter') { e.stop(); if(inputs[i+1]) { inputs[i+1].focus(); } //last one? if(i == inputs.length-1) { $('submit-button').focus(); } } }); });

When the customer hits the enter key, the cursor simply appears in the next input.

While I certainly wouldn't recommend this for every form, it definitely suited this customer's needs.