Command + Enter to Submit Forms

By  on  

I've used Mac's for about six years now but it wasn't until I started using Tweetdeck that I realized how awesome the [COMMAND]+[ENTER] key combination was.  Inside a textarea?  No problem -- [COMMAND]+[ENTER] and the form is submitted.  What if all forms could be that way?  They can be with a little JavaScript!

The JavaScript

There are two routes to go:  adding an event listener to the form (event delegate), or applying an event listener to specific textarea elements.  The safer route is event delegation, as dynamic forms can have many textareas added at any time, but per-textarea assignments are much more efficient. Ultimately it's up to the developer to know their form.  Here are three code samples to accomplish form submission in a variety of ways:

// Assign to individual textarea (most efficient)
myTextarea.addEventListener('keydown', function(e) {
	if(e.keyCode == 13 && e.metaKey) {
		this.form.submit();
	}
});

// Form event delegation - individual form (somewhat efficient)
form.addEventListener('keydown', function(e) {
	if(!(e.keyCode == 13 && e.metaKey)) return;

	var target = e.target;
	if(target.form) {
		target.form.submit();
	}
});

// Body event delegation - any form (least efficient)
document.body.addEventListener('keydown', function(e) {
	if(!(e.keyCode == 13 && e.metaKey)) return;

	var target = e.target;
	if(target.form) {
		target.form.submit();
	}
});


Tweetdeck uses [COMMAND]+[ENTER] as does GitHub on some of their forms.  I've naturally started checking for this key command combo instead of tabbing to a field which will submit the form via traditional [ENTER] key.

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Being a Dev Dad

    I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...

Incredible Demos

  • By
    dwProgressBar v2:  Stepping and Events

    dwProgressBar was a huge hit when it debuted. For those of you who didn't catch my first post, dwProgressBar is a MooTools 1.2-based progress bar which allows for as much flexibility as possible. Every piece of dwProgressBar can be controlled by CSS...

  • By
    Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.

Discussion

  1. Markus

    In case you use jquery event handlers you should wrap the form-element with jquery and call jquery’s .submit() method, otherwise jquery event handlers won’t be fired.

  2. Hey David, great post. I think key actions are one of the awesome UX features we lost from the purely desktop development days. Where I work, we use a ticket tracking service called JIRA. JIRA has some bad ass key actions that make working with the service such a joy. I created a small utility called keyper, https://github.com/dustinhayes/keyper, that allows the user to bind functions to key commands. Hopefully this could help bridge the gap a bit.

  3. Ling

    In some CMS that’s the Shortcut for a linebreak..

    • The standard for linebreak is SHIFT+ENTER, so I would argue the CMS did something unintuitive

  4. Asmor

    Ctrl+enter is the same in Windows. It’s not used everywhere, but it’s pretty common.

  5. I disagree about attaching an event handler to all textareas being the most efficient. If you have a large number of text editors, the form event delegation would be more efficient due to it only using a single event listener.

    • I said that because if your form has numerous INPUT[type=text] elements, you’d be executing functionality upon every keystroke if you were doing event delegation.

  6. If you want to detect windows “ctrl”+”enter” event as well, try using the code below:

    if(e.keyCode == 13 && (e.metaKey || e.ctrlKey)) {
    
    }
  7. As e.keyCode is deprecated now, this solution needs update to use e.code:

    if (e.code === 'Enter' && (e.metaKey || e.ctrlKey)) {
       this.doneCommentEdit(comment);
    }
    

    Thanks for sharing!

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