Prevent enter key on html input field react.js

Question

I have a input field where when the user types in something, a list of options shows up underneath and the user will click on one of the options. The user can also press the Enter key as well. However, if the user were to enter something that is not in the dropdown that pops up and presses enter, my app crashes. I'm wondering if there is a way where I can disable the enter key on the input field so that when someone tries to press it, it just won't do anything.

Note that is in React as well!

Any help would be appreciated!

Thanks!

If you can then upload your code so that one can understand it more accurately — Mihir
– Mihir, Commented Oct 27, 2018 at 18:05

Sahil Mahajan Mj · Accepted Answer · 2020-02-18 13:03:10Z

4

You can use onKeyDown event of the input field. You can call some method like below,

const onKeyDown = (event) => {
    if (event.keyCode === 13) { //13 is the key code for Enter
      event.preventDefault()
      //Here you can even write the logic to select the value from the drop down or something.
    }

answered Feb 18, 2020 at 13:03

Sahil Mahajan Mj

11.2k8 gold badges56 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Shtang · Accepted Answer · 2018-10-27 18:07:27Z

1

You probably need event.preventDefault() method inside input change method.

Something like:

inputChange = event => {
  if (event.target.key === 'Enter') {
    event.preventDefault();
  }
}

answered Oct 27, 2018 at 18:07

Alexander Shtang

1,9694 gold badges16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Prevent enter key on html input field react.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related