Submit a form when enter is pressed in a textarea in React?

Question

How can I make a form submit when a user pressed Enter in a <textarea>? The default behaviour is to insert a linebreak into the <textarea>.

<form className="" onSubmit={newComment}>
    <textarea type="text" rows="3" name="body" />
    <button className="btn" type="submit">
        Comment
    </button>
</form>

Should I have an onChange event on the <textarea>, and in a function test to see if the Enter key was pressed? This is how I would do it with vanilla JavaScript but I couldn't find the key event in React's synthetic event.

use onKeyDown handler and check for event.keyCode, it will work. Working Fiddle — Mayank Shukla
– Mayank Shukla, Commented Dec 14, 2017 at 8:59

Chris · Accepted Answer · 2017-12-14 09:01:50Z

56

Your textarea is an uncontrolled element. This is an acceptable approach, however, facebook encourages the use of controlled inputs.

Anyway, here is how to do it for uncontrolled forms:

onEnterPress = (e) => {
  if(e.keyCode == 13 && e.shiftKey == false) {
    e.preventDefault();
    this.myFormRef.submit();
  }
}

render() {
  return (
    <form ref={el => this.myFormRef = el} className="">
      <textarea type="text" rows="3" name="body" onKeyDown={this.onEnterPress} />
      <button className="btn" type="submit">
        Comment
      </button>
    </form>
  );
}

You can also use id instead of refs above.

edited Dec 14, 2017 at 9:01

answered Dec 14, 2017 at 8:59

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

7 Comments

Mayank Shukla Over a year ago

we can directly call the submit function also newComment(), instead of ref :)

Chris Over a year ago

@MayankShukla, true. I can't see that function anywhere in op code, so I excluded that bit.

Cyril CHAPON Over a year ago

@Chris, as you mentionned yourself, uncontrolled is one of two ways of handling texteareas in React. The question was "How can I make a form submit when a user pressed 'enter' in a textarea?", and you answer here is how to do it for uncontrolled forms. So I'd say answer is incomplete, isn't it ? :D

Chris Over a year ago

@CyrilCHAPON sorry for late answer. The solution wouldn't vary for controlled forms either.

huykon225 Over a year ago

oh that's right. I will check carefully again

|

wasserholz · Accepted Answer · 2022-03-15 07:59:18Z

11

With react 17 this does not seem to work anymore. Instead use requestSubmit().

The HTMLFormElement.submit() method submits a given form.

This method is similar, but not identical to, activating a form's submit button. When invoking this method directly, however:
No submit event is raised. In particular, the form's onsubmit event handler is not run.
Constraint validation is not triggered.
The HTMLFormElement.requestSubmit() method is identical to activating a form's submit button and does not have these differences.

Further reading here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

    onEnterPress = (e) => {
      if(e.keyCode == 13 && e.shiftKey == false) {
        e.preventDefault();
        this.myFormRef.requestSubmit();
      }
    }
    
    render() {
      return (
        <form ref={el => this.myFormRef = el} className="">
          <textarea type="text" rows="3" name="body" onKeyDown={this.onEnterPress} />
          <button className="btn" type="submit">
            Comment
          </button>
        </form>
      );
    }

answered Mar 15, 2022 at 7:59

wasserholz

2,4832 gold badges24 silver badges29 bronze badges

2 Comments

Nikola Mitic Over a year ago

Very much correct sir, accepted answer should be updated. Thanks.

ajay Over a year ago

This works in 2024

Andres Moschini · Accepted Answer · 2024-01-05 18:00:03Z

3

This snippet based on previous responses could be useful:

export const SubmitOnEnterTextArea = (
  props: React.TextareaHTMLAttributes<HTMLTextAreaElement>,
) => (
  <textarea
    {...props}
    onKeyDown={(e) => {
      if (e.key === "Enter" && !e.shiftKey && "form" in e.target) {
        e.preventDefault();
        (e.target.form as HTMLFormElement).requestSubmit();
      }
    }}
  ></textarea>
);

answered Jan 5, 2024 at 18:00

Andres Moschini

212 bronze badges

Comments

Tarun Kumar · Accepted Answer · 2023-01-29 11:21:28Z

0

For functional component edit form element as requirements

  const functionalComponent = () => {
  const addData = () => {
    localStorage.setItem("anyitem","anyData")
  }

  EnterPress = (e) => {
    if (e.keyCode == 13 && e.shiftKey == false) {
      e.preventDefault();
      addData();
    }}
    return (
      <>
      <textarea type="text" rows="3" name="body" onKeyDown={EnterPress} />
      </>
    );
  }

edited Jan 29, 2023 at 11:21

answered Jan 29, 2023 at 11:20

Tarun Kumar

112 bronze badges

1 Comment

Ahmed Sbai Over a year ago

Please add some more details do not post code only answers

Collectives™ on Stack Overflow

Submit a form when enter is pressed in a textarea in React?

4 Answers 4

7 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related