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.
![LightFace: Facebook Lightbox for MooTools]()
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
![MooTools, mediaboxAdvanced, and Mexico]()
The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...
![Create a Simple Slideshow Using MooTools, Part II: Controls and Events]()
Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by:
Adding "Next" and "Previous" controls.
Adding...
Awesome!
Outstanding little clip…one I can put into use almost immediately!
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.
How about the TAB key?