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.
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Upload Photos to Flickr with PHP]()
I have a bit of an obsession with uploading photos to different services thanks to Instagram. Instagram's iPhone app allows me to take photos and quickly filter them; once photo tinkering is complete, I can upload the photo to Instagram, Twitter, Facebook, and...
![Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript]()
I'm what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most...
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?