捕获表单onSubmit vs catch Enter键?

时间:2014-02-12 05:15:18

标签: javascript html forms

我有一个涉及文本框和按钮的页面,其中包含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>

VS

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

3 个答案:

答案 0 :(得分:2)

  

我的直觉是使用表单和onSubmit

听起来你的直觉与普通的做法一致。 ; - )

  

具有在浏览器级别处理唯一提交方法的优势

这使它变得健壮和可靠,或许可以解释为什么它是常见的做法。

  

但我不确定是否有任何标准/最佳做法可以阻止这种情况。

当然没有任何官方标准(但这也不是他们的工作)。 “最佳”是基于进行比较的标准的相对术语。如果你的标准包括:健壮性,无用的支持,易于维护和简单,那么在表单上放置提交监听器可能会排名很高。

PS:要使表单控件成功(即,使用表单提交其值),它必须具有名称。 ID是可选的(通常不是必需的)。

答案 1 :(得分:0)

这是解决方案,您正在寻找

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

答案 2 :(得分:0)

有两种标准方法可以做到: 正如你提到的那样:

<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>