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
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Create a Brilliant Sprited, CSS-Powered Firefox Animation

    Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited.  Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself in the US as well.  The...

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!