Submit on enter except when shift is pressed in JavaScript

Been working on something recently where I wanted to implement a submit handler when a user hits the enter key in an input. That’s not that big of a deal, sniff out the key being pressed, and if it’s the Enter key, go ahead and execute the submit handler.

Since the element in question is an input field, I wanted to allow folks the ability to hold the shift key to enter new line breaks. Best as I can remember, this worked fine with textarea elements, but with a Slate.js editor, not so much.

Not happy with “it is what it is” I decided it was high time that I learned how to handle the detection of modifier keys in conjunction with other keys being pressed.

Turns out, it wasn’t all that hard at all. Simply interrogate the shiftKey on the event to see if the Shift key was being pressed, and continue to check the key value on the event for the Enter key as per usual.

The end result, in the form of my onKeyPress handler:

const onKeyDown = (event: any): void => {
  if (eventkey === 'Enter' && !event.shiftKey) {
    // Enter was hit by itself, do some stuff!
  }
};

There’s some other variables you can interrogate as well if sniffing other other modifier keys in your thing ;)