当按下ENTER键或其按钮时，使窗体运行javascript，而不提交

我有一个只有一个字段的表单：

  <form id="formCode" onsubmit="return saveCode()" />
    <label for="fcode">Type Code:</label><br>
    <input type="text" id="fcode" name="fcode" autofocus /><br>
    <input type="submit" value="Submit – Enviar" onclick="return saveCode()" />
  </form>      

现在发生的事情是：表单总是提交的

我想要这种行为：

用户位于文本字段内并键入代码

此时，我希望用户能够按ENTER键并运行

saveCode（）

或

按提交按钮，然后运行

saveCode

我不希望提交此表单，只需运行javascript方法

如果字段是空的，我不想做任何事情

---

正如@Bergi前面所说的，最好的方法是使用

event.preventDefault（）

。因此为了实现这一点，您需要进行一些修改，首先，最好将事件侦听器设置为特定的

输入

，然后用于侦听事件的其余代码应该可以正常工作。然后您需要在

saveCode（）

中使用

event.preventDefault（）

（以及在捕获enter事件后）来阻止提交表单，但要使

事件

按预期工作，您需要避免在单击

时使用return（
return saveCode（）
）方法以允许事件自动传递给函数

更新
因为在前面的方法中有一些bug，所以我只是对其进行了一些修改。由于
saveCode（）
引用错误，我将其所有用法移到上面以防止出现这种情况，然后我删除了
onclick
事件（不再推荐这些事件），然后添加一个事件侦听器来提交事件

因此，您的最终代码应该是这样的（如果存在
saveValue（）
，并且工作正常）：


var codeField=document.getElementById（“fcode”）；
函数saveCode（）{
log（“saveCode正在运行！”）；
保存值（value）；
codeField.value=“已提交”；
返回false；
}
文件
.getElementById（“fcode”）
.addEventListener（“向下键”，函数（inEvent）{
如果（inEvent.keyCode==13）{
//进入
inEvent.preventDefault（）；
如果（this.value==“”）{
返回false；
}//什么也不做
saveCode（）；
返回false；
}
});
文件
.getElementById（“格式代码”）
.addEventListener（“提交”，函数（inEvent）{
event.preventDefault（）；
var值=codeField.value；
如果（值==“”）{
返回false；
}
saveCode（）；
});

类型代码：



正如@Bergi之前所说的，最好的方法是使用
event.preventDefault（）
。因此为了实现这一点，您需要进行一些修改，首先，最好将事件侦听器设置为特定的
输入，然后用于侦听事件的其余代码应该可以正常工作。然后您需要在
saveCode（）
中使用
event.preventDefault（）
（以及在捕获enter事件后）来阻止提交表单，但要使
事件
按预期工作，您需要避免在单击
时使用return（
return saveCode（）
）方法以允许事件自动传递给函数

更新
因为在前面的方法中有一些bug，所以我只是对其进行了一些修改。由于
saveCode（）
引用错误，我将其所有用法移到上面以防止出现这种情况，然后我删除了
onclick
事件（不再推荐这些事件），然后添加一个事件侦听器来提交事件

因此，您的最终代码应该是这样的（如果存在
saveValue（）
，并且工作正常）：


var codeField=document.getElementById（“fcode”）；
函数saveCode（）{
log（“saveCode正在运行！”）；
保存值（value）；
codeField.value=“已提交”；
返回false；
}
文件
.getElementById（“fcode”）
.addEventListener（“向下键”，函数（inEvent）{
如果（inEvent.keyCode==13）{
//进入
inEvent.preventDefault（）；
如果（this.value==“”）{
返回false；
}//什么也不做
saveCode（）；
返回false；
}
});
文件
.getElementById（“格式代码”）
.addEventListener（“提交”，函数（inEvent）{
event.preventDefault（）；
var值=codeField.value；
如果（值==“”）{
返回false；
}
saveCode（）；
});

类型代码：



表单中的所有按钮都被编程为自动提交表单（或type=submit），这意味着有两种方法可以完成此操作：

1） 
表单外部

2） 
表单内部
表单内部的所有按钮都被编程为自动提交表单（或type=submit），这意味着有两种方法可以完成此操作：

1） 
表单外部

2） 
在表单内部
问题在于您试图调用
saveValue（value）
函数，但该函数未定义。因此，false永远不会返回。删除
saveValue（value）
或定义它，然后再试一次，此操作有效

您不需要在
onsubmit
中使用
return
，只需编写
onsubmit=“saveCode（）”
问题在于您试图调用
saveValue（value）
函数，但这是未定义的。因此，false永远不会返回。删除
saveValue（value）
或定义它，然后再试一次，此操作有效

您不需要在
onsubmit
中使用
return
，只需编写
onsubmit=“saveCode（）”
即
onsubmit
处理程序即可。尝试使用
event.preventDefault
而不是返回
false
。
onsubmit
处理程序应该就是您所需要的了。尝试使用
event.preventDefault
而不是返回
false
。非常奇怪。我在这里测试你的代码，它可以工作，我把你的代码复制到我的页面，它不能！我确实复制了粘贴fr
 document.addEventListener("keydown", function(inEvent){
    if (inEvent.keyCode == 13) { // enter
      if (document.getElementById("fcode").value === "") { return; }  // do nothing
      saveCodeCode();
      return false;
    }
  });

  function saveCode() {
    var codeField = document.getElementById("fcode");
    var value = codeField.value;
    if (value === "") { return false; }
    saveValue(value);
    codeField.value = "Submitted";
    return false;
  }