在输入字段上按回车键触发按钮单击 function

Question

  <form onsubmit="myFunction()">
  Enter name: <input type="text" name="fname">
  <!--input type="submit" value="Submit"-->
  <button onclick="alert('button click')">click</button>
</form>

press enter on input triggeres button onclick, formsubmit. how to avoid button onclick trigger.

Answer 1

run this after the form has been rendered

document.querySelector('input[name="fname"]').onkeydown=e=>{

   if(e.key==='Enter')e.preventDefault();

   //if you want form submission
   document.querySelector('form').submit();

};

Answer 2

When you have a button in a form, it defaults to type "submit" which means the first button in a form will have its onclick event triggered by the ENTER key. To prevent this from happening, simply assign type="button" to the button, and enter key will no longer affect it.

Answer 3

try this

 <form onsubmit="myFunction()"> Enter name: <input type="text" name="fname" id="fname"> <.--input type="submit" value="Submit"--> <button onclick="alert('button click')" id="btn">click</button> </form> <script type="text/javascript"> var input = document;getElementById("fname"). input,addEventListener("keypress". function(event) { if (event.key === "Enter") { event;preventDefault(). document.getElementById("btn");click(); } }); </script>