防止在点击文本输入键时提交表单

Question

我知道以前有人问过这个问题，但我找不到适合我情况的满意答案。所以我再问一次。

我有一个带有 2 个文本框和一个提交按钮的简单表单。用户在任一文本框中输入文本后，他们不应该能够通过 Enter 键提交，只有提交按钮应该允许他们提交。我认为捕获回车键并从 onChange 事件处理程序返回 false 可以解决问题，但显然不是，这仍然会导致表单提交……

 function doNotSubmit(element) {

        alert("I told you not to, why did you do it?");
        return false;

}
</script>

<form id="myForm" action="MyBackEnd.aspx" method="post">

<table>
    <tbody>
    <tr>
        <td>
          Joe:  <input id="JoeText" type="text" onChange="doNotSubmit(this)">
        </td>
        <td>
          Schmoe:  <input id="SchmoeText" type="text" onChange="doNotSubmit(this)"  >
        </td>
    </tr>
    </tbody>
</table>

<input type=submit>

我在 Chrome 和 FF（最新版本）上进行了测试。

你能告诉我如何防止表单提交吗？

谢谢。

原文由 AbuMariam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

搭载@Dasein 的 anwser 你想阻止默认行为而不是停止传播（即返回 false）：

 document.getElementById("myForm").onkeypress = function(e) {
  var key = e.charCode || e.keyCode || 0;
  if (key == 13) {
    alert("I told you not to, why did you do it?");
    e.preventDefault();
  }
}

 <form id="myForm" action="MyBackEnd.aspx" method="post">

<table>
    <tbody>
    <tr>
        <td>
          Joe:  <input id="JoeText" type="text">
        </td>
        <td>
          Schmoe:  <input id="SchmoeText" type="text" >
        </td>
    </tr>
    </tbody>
</table>

<input type=submit>

原文由 devkaoru 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为应该这样做：

 document.getElementById("myInput").onkeypress = function(e) {
     var key = e.charCode || e.keyCode || 0;
     if (key == 13) {
        alert("I told you not to, why did you do it?");
        return false;
     }
}

原文由 user2755140 发布，翻译遵循 CC BY-SA 3.0 许可协议