How can I add onKeyPress event to react material-ui textfield?

Question

I used a TextField from react material-ui. I want to know whether the user has pressed Ctrl+Enter. I have tried using onKeyPress event but got no result. How can I achieve this?

<TextField
    value={this.state.message}
    autoFocus={true}
    hintText='Type your message here'
    onChange={this.onChangeMessage}
    onKeyPress={(event) => {
        if (event.ctrlKey && event.keyCode == '13')
            this.sendMessage();
    }}
    multiLine={true}
/>

You should've used onKeyDown instead of onKeyPress if you want to be able to get keyCode value. — zilijonas, Mar 12 '19 at 14:55

score 30 · Answer 1 · edited Jul 27 '21 at 07:20

30

onKeyPress is a synthetic Key event that React supports as mentioned here. Try this code:

 onKeyPress= {(e) => {
            if (e.key === 'Enter') {
              console.log('Enter key pressed');
              // write your functionality here
            }
    }}

edited Jul 27 '21 at 07:20

Oded Ben Dov

9,936
6
38
53

answered Sep 01 '17 at 05:28

Peter

10,492
21
82
132

score 12 · Answer 2 · answered Feb 11 '20 at 10:42

12

Maybe you should try onKeyUp instead of onKeyPress

<TextField
    value={this.state.message}
    autoFocus={true}
    hintText='Type your message here'
    onChange={this.onChangeMessage}
    onKeyUp={(event) => {
        if (event.ctrlKey && event.key== 'Enter')
            this.sendMessage();
    }}
    multiLine={true}
/>

answered Feb 11 '20 at 10:42

m0ncld

301
4
10

3

Thanks, onKeyPress isn't triggered for navigation keys or esc but onKeyUp is triggered – grantnz Feb 24 '20 at 22:00
thanks, but for me event.ctrlKey condition fas false for 'enter' – Ivan Yulin Jul 13 '22 at 13:35

score 9 · Answer 3 · answered May 13 '20 at 10:03

You'd better use onKeyDown for this purpose. Here's the reason (link):

The onKeyDown event is triggered when the user presses a key.
The onKeyUp event is triggered when the user releases a key.
The onKeyPress event is actually an onKeyDown followed by an onKeyUp.

So, the code will be:

onKeyDown={(e) => {
   if (e.key === "Enter") {
      desiredFunction();
   }
}}

score 1 · Answer 4 · answered Aug 12 '20 at 21:56

With material-ui, and typscript I am using:

              <TextInput
                id="password"
                label="Password"
                type="password"
                onKeyPress={(data: any) => {
                  if (data.charCode === 13) {
                    console.log("Key `Enter` pressed");
                  }
                }}
                value={password}
                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                  this.setState({ password: event.target.value })
                }
              />

1

.Thanks for you effort – Ali-Alrabi Feb 21 '22 at 12:19

score 0 · Answer 5 · answered May 09 '22 at 07:03

You can use this trick:

 <TextField
        value={this.state.message}
        autoFocus={true}
        hintText='Type your message here'
        onChange={this.onChangeMessage}
        onKeyDown={(event) => {
            var evtobj = window.event ? event : e
            if (evtobj.ctrlKey && evtobj.key == 'Enter')
              this.sendMessage()
          }}
        multiLine={true}
    />

score -3 · Answer 6 · answered Sep 01 '17 at 06:48

-3

Please update the onKeyPress event with the below code

if ((event.keyCode == 10 || event.keyCode == 13) && event.ctrlKey)

Please see the link for Key Code Values

answered Sep 01 '17 at 06:48

Mothy

406
1
7
19

`event.keyCode` was deprecated – J'e Jun 02 '20 at 18:33

How can I add onKeyPress event to react material-ui textfield?

6 Answers6

Linked