按 Enter 不会调用 HTML 表单中的 javascript 函数

Question

我有一个带有一个输入字段的简单表单。当我使用提交时它工作正常，但在文本字段中按 Enter 会重新加载带有 URL 中的表单变量的页面。

我浏览了许多在线可用的解决方案（JQuery 除外，因为对于这么简单的事情似乎有点过分了），但无法让“输入”工作。任何帮助都会很棒

<form name="myform" action="" method="GET" > Enter text: <br>
  <input type="text" name="queryinput" onkeyup="if(isEnterPressed(event)){initialize(this.form.queryinput.value);}"><P>
  <input type="button" name="Search" value="Search" onClick="initialize(this.form.queryinput.value);">
  <input type="submit" value="Reset" onclick="reset();" />
</form>

function isEnterPressed(e){
  var keycode=null;
  if (e!=null){
    if (window.event!=undefined)    
      if (window.event.keyCode) keycode = window.event.keyCode; 
      else if (window.event.charCode) keycode = window.event.charCode;
    }else{
            keycode = e.keyCode;
    }
  }
return (keycode == 13);}

编辑 1：使用 onsubmit 代替键码侦听器的版本：

<form name="myform" action="" onsubmit="return initialize(this.form.queryinput.value)"  method="GET"> Enter text:<br>
<input type="text" name="queryinput">
<input type="submit" value="submit" >
<input type="button" value="Reset" onclick="clearAllPoints();"/>
</form>

使用 onSubmit 会导致点击按钮的行为与按 Enter 相同，但两个版本都不起作用。

Answer 1

尝试将the onSubmit event 用于form，而不是onClick 事件用于input 元素。似乎onClick 仅在被鼠标物理单击时才会触发（这是有道理的，我猜我从未遇到过这样的情况）。但是，无论表单如何提交，onSubmit 事件都应该触发。

Answer 2

如果您将字段设置在表单之外，则在您按 Enter 时它不会自动提交表单。然后，您可以让按钮将输入字段中的文本复制到实际表单中的隐藏字段，然后提交。

--编辑，添加代码--

Enter text:<br>
<input type="text" id="myinputfield">
<form name="myform" id="myform" action="" method="GET">
  <input type="hidden" name="queryinput" id="queryinput">
  <input type="button" value="Submittal button" onclick="doSubmitForm();" />
</form>
<script type="text/javascript">
  function doSubmitForm(){
    itm1 = document.getElementById('myinputfield');
    itm2 = document.getElementById('queryinput');

    if (!itm1 || !itm2) return false;

    //You could put form input verification here

    itm2.value = itm1.value;
    document.forms["myform"].submit();
  }
</script>