Question

我有一个带有一个输入字段的简单表单。它在我使用提交时工作正常，但是在文本字段中按回车键会在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);}

使用onsubmit编辑1：版本而不是键码侦听器：

<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会使点击按钮的行为与点击输入相同，但两种版本都不起作用。

Answer 1

尝试form使用the onSubmit event而不是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>

点击输入不会以HTML格式调用javascript函数

2 个答案: