javascript - Catching form onSubmit vs catching Enter key? - Stack Overflow

admin管理员组

文章数量:1406966

I have a page that involves a textbox and a button, with JavaScript functionality that triggers when a user clicks on the button. I'd like the functionality to also be triggered when the user presses the Enter key.

What I'm not sure about is whether to make the two inputs into a form and use "return functionname()" in the onSubmit attribute, or to capture pressing the Enter key in the textbox. My gut instinct is to use a form and onSubmit, which has the advantage of handling unique submission methods on the browser level, but I'm not sure if there are any standards/best practices that discourage that.

That is:

<form id="myform" onsubmit="return myFunction()">
<input type="text" id="mytextbox">
<input type="submit" id="mysubmit" value="Go">
</form>

vs

<input type="text" id="mytextbox" onkeypress="myFunction()">
<input type="button" id="mysubmit" value="Go" onclick="myFunction()">

I have a page that involves a textbox and a button, with JavaScript functionality that triggers when a user clicks on the button. I'd like the functionality to also be triggered when the user presses the Enter key.

What I'm not sure about is whether to make the two inputs into a form and use "return functionname()" in the onSubmit attribute, or to capture pressing the Enter key in the textbox. My gut instinct is to use a form and onSubmit, which has the advantage of handling unique submission methods on the browser level, but I'm not sure if there are any standards/best practices that discourage that.

That is:

<form id="myform" onsubmit="return myFunction()">
<input type="text" id="mytextbox">
<input type="submit" id="mysubmit" value="Go">
</form>

vs

<input type="text" id="mytextbox" onkeypress="myFunction()">
<input type="button" id="mysubmit" value="Go" onclick="myFunction()">

• javascript
• html
• forms

Share Improve this question Follow asked Feb 12, 2014 at 5:15 HydrothermalHydrothermal 5,08177 gold badges3232 silver badges4747 bronze badges 1

• There is no default functionality on hitting enter to submit a form. You have to do that manually when ever enter key is pressed. And thus you can have your javascript functionality in onSubmit. – Shailesh Saxena Commented Feb 12, 2014 at 5:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

My gut instinct is to use a form and onSubmit

sounds like your gut is in tune with mon practice. ;-)

which has the advantage of handling unique submission methods on the browser level

Which makes it robust and reliable, perhaps explaining why it is mon practice.

but I'm not sure if there are any standards/best practices that discourage that.

Certainly no official standards either way (but it's not their job to do that either). "Best" is a relative term based on criteria for making parisons. If your criteria include things like: robustness, ubuiquitous support, ease of maintenance and simplicity then putting a submit listener on the form will likely rank very highly.

PS: For a form control to be successful (i.e. for its value to be submitted with the form), it must have a name. An ID is optional (and usually not required).

Here is the solution, you are looking for

$(document).ready(function(){
    $('#mytextbox').keypress(function(ev){
      //If user pressed Enter Key then trigger Submit click
      if(ev.keyCode==13)
      $('#mysubmit').click();
    });
});

there are two standard ways todo it: as you mention like this:

<form id="myform" onsubmit="return myFunction()">
<input type="text" id="mytextbox">
<input type="submit" id="mysubmit" value="Go">
</form>

And also

<form id="myform">
<input type="text" id="mytextbox">
<input type="submit" id="mysubmit" value="Go" onclick="return myFunction()">
</form>

本文标签： javascriptCatching form onSubmit vs catching Enter keyStack Overflow