react hook how to detect key combination cmd+enter

Question

I want to run a function when detect key combination cmd+enter within a text-area.

And it need to be compatible with react hook.

I need some suggestion on how to do this.

useEffect(() => {
        const listener = (event) => {
            console.log('a', event.which)
            if (event.which === 13 && event.which === 91) {
                console.log('Enter key was pressed. Run your function.')
                event.preventDefault()
                // callMyFunction();
            }
        }
        document.addEventListener('keydown', listener)
        return () => {
            document.removeEventListener('keydown', listener)
        }
    }, [])

This is my code, it doesn't regconize the combination.

As you are trying to detect multiple key press events at a time, tak a look at this answer : https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript Also your react hook part looks fine. — Kathan Patel, Jun 02 '21 at 07:22

Nithish · Accepted Answer · 2021-06-02T09:26:14.203

You can make use of Event.metaKey in order to listen to Command key clicks in Mac.

const { useEffect } = React;

const App = () => {
  const onKeyDown = (e) => {
    if(e.metaKey && e.which === 13) {
      console.log("command + enter clicked");
    }
  }
  
  useEffect(() => {
    document.getElementById("test").addEventListener('keydown', onKeyDown);
    
    return () => {
        document.getElementById("test").removeEventListener('keydown', onKeyDown);
    }
  });
  
  return <textarea id="test"/>
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>

Or you can simply do as shown below

const { useEffect } = React;

const App = () => {
  const onKeyDown = (e) => {
    if(e.metaKey && e.which === 13) {
      console.log("command + enter clicked");
    }
  }
  
  return <textarea onKeyDown={onKeyDown}/>
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

<div id="react"></div>

How to attach the event to current textarea instead of document ? — angry kiwi, Jun 02 '21 at 08:44

Pavel S · Answer 2 · 2023-06-09T08:29:45.453

Update 2023

MDN: keyCode property is deprecated https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Here's an implementation for React using Typescript.

import { KeyboardEvent } from "react"

/**
 * Submit forms on CTRL + Enter or CMD + Enter
 *
 * Usage: <form onKeyDown={onCtrlEnter(...)} />
 * - We have to use onKeyDown, otherwise the metaKey is not set on Mac
 *
 */
export function onCtrlEnter(fn: () => void) {
  return (e: KeyboardEvent) => {
    /** CTRL + Enter and CMD + Enter */
    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
      fn()
    }
  }
}

I hope this helps.

react hook how to detect key combination cmd+enter

2 Answers2