javascriptformsonkeyuponkeypress

How to trigger Form submit function from text field keypress?


The form submit button works by clicking on the form submit button:

<button id="formBtn" onClick={submitForm(onFormSubmit)} >

Then I was trying to use "Enter" key to trigger that "submitForm" function by adding the code below in one text input in my form in TailwindCSS.

In the browser console I could only see log1, but both "submitForm" and "onFormSubmit" functions were not triggered. Why?

<input
  onInput={handleInput}
  onkeypress={(e)=>{
    if(e.key === "Enter" && !e.shiftKey) {
      console.log("log1:Enter detected")
      submitForm(onFormSubmit)
    }
  }}
/>

Solution

  • Solved by this post: Trigger a button click with JavaScript on the Enter key in a text box

    It is better to use "onkeyup", and use JavaScript to click on HTML buttons:

      <input
         onInput={handleInput}
         onkeyup={(e) => onKeyUpEnter(e)}
      />
    
      const onKeyUpEnter = (e: KeyboardEvent) => {
        console.log("onKeyUpEnter. e:", e);
        //e.preventDefault();
        if (e.key === "Enter" && !e.shiftKey) {
          console.log("Enter detected")
          document.getElementById("formBtn")!.click();
          //submitForm(onFormSubmit)
        }
      }