捕捉表单提交与捕捉输入键？答案

【问题标题】：Catching form onSubmit vs catching Enter key?捕捉表单提交与捕捉输入键？
【发布时间】：2014-02-12 05:15:18
【问题描述】：

我有一个页面，其中包含一个文本框和一个按钮，当用户单击该按钮时会触发 JavaScript 功能。我希望在用户按下 Enter 键时也能触发该功能。

我不确定是将这两个输入变成一个表单并在 onSubmit 属性中使用“return functionname()”，还是捕获在文本框中按下 Enter 键。我的直觉是使用表单和 onSubmit，它的优点是可以在浏览器级别处理独特的提交方法，但我不确定是否有任何标准/最佳实践不鼓励这样做。

即：

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

对

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

【问题讨论】：

点击回车提交表单没有默认功能。按下输入键时，您必须手动执行此操作。因此，您可以在 onSubmit 中使用 javascript 功能。

标签： javascript html forms

【解决方案1】：

我的直觉是使用表单和 onSubmit

听起来您的直觉与常规做法一致。 ;-)

它的优点是在浏览器级别处理独特的提交方法

这使它健壮和可靠，也许可以解释为什么它是常见的做法。

但我不确定是否有任何标准/最佳做法不鼓励这样做。

当然也没有官方标准（但这也不是他们的工作）。 “最佳”是基于进行比较的标准的相对术语。如果您的标准包括：稳健性、无处不在的支持、易于维护和简单，那么在表单上放置一个提交侦听器可能会排名很高。

PS：要使表单控件成功（即要与表单一起提交其值），它必须具有名称。 ID 是可选的（通常不需要）。

【讨论】：

【解决方案2】：

这里是你正在寻找的解决方案

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

【讨论】：

投反对票的最快方法是在问题上没有 jQuery 标签或 OP 中没有提及时给出 jQuery 答案。我这种情况，也无关紧要。发帖人想知道的是策略，而不是执行。
感谢您的回复，但我正在寻找有关最佳实施方法的说明，而不是实际代码。另外，我更倾向于使用$("#myform").submit() 而不是$('#mysubmit').click();。
据我所知，最好的方法是将按钮设置为默认提交，这样当用户按下回车键时，默认按钮就会自动触发。这是设置默认按钮stackoverflow.com/questions/925334/…的参考
@MRaja——根本不需要脚本，这是所有浏览器的默认行为。 OP 不是“按下输入时如何提交表单”，而是“附加提交侦听器的最佳策略是什么”。按下回车键是用户触发提交事件的不同方式的一个示例。

【解决方案3】：

有两种标准方法：正如你提到的那样：

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

还有

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

【讨论】：