Prevent Early Form Submission by Hijacking the Enter Key

By  on  

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.

Recent Features

  • By
    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    Do / Undo Functionality with MooTools

    We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...

  • By
    MooTools & Printing – Creating a Links Table of Contents

    One detail we sometimes forget when considering print for websites is that the user cannot see the URLs of links when the page prints. While showing link URLs isn't always important, some websites could greatly benefit from doing so. This tutorial will show you...

Discussion

  1. Ahmed

    Awesome!

  2. JGM

    Outstanding little clip…one I can put into use almost immediately!

  3. Agreed! Excellent and well executed idea. As you say, probably not for all forms — and it might be useful to provide some education with respect to the tab key which is for all forms — but useful for critical processes that must not be interrupted. Well done.

  4. How about the TAB key?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!