Submit any form with a keyboard shortcut

Say you have a simple form like “Add comment” similar to this image

Add comment form

Now, this is a text-area, so the ENTER key will break rows and will not automatically submit the form to the server.

I want to create a flexible way to send the form to the server with a keyboard shortcut like CTRL+ENTER.

Thanks to an awesome library by Thomas Fuchs called KeyMaster it turned out to be quite simple.

By default, Keymaster ignores all keyboard shortcuts if it’s inside an input or textarea or even a select box, obviously that is not what I wanted or needed.

Luckily, you can override that behavior with a filter function, like so

 

Now, all you need to do is listen to the event, and when it’s fired, submit the parent form. like so:

 

That’s it, now every text-input, input or select box can submit the form with this shortcut, it’s super useful and your users will certainly like it.

Submit to Hacker News

[NOTE] This post has been imported to Hugo from a Wordpress blog. It may be broken, missing images, code snippets or other information.

[NOTE] updated March 27, 2012. It's 2488 days old . This article may have outdated content.