阻止在按 Enter 键的文本时提交表单答案

【问题标题】：Prevent form submission on hitting Enter key for Text阻止在按 Enter 键的文本时提交表单
【发布时间】：2015-05-21 21:21:38
【问题描述】：

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

我有一个带有 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（最新版本）上进行了测试。

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

谢谢。

【问题讨论】：

Prevent Users from submitting form by hitting enter 的可能重复项
首先，我认为您需要 onkeypress 或 onkeydown 而不是 onchange。其次，e 在你的doNotSubmit 函数中来自哪里？
@Dan 另一个问题不是真正的重复，因为它在问题和标签中明确命名了 jQuery，而这个问题也没有提及。至少，问这个问题的人对非 jQuery 解决方案持开放态度，许多人（比如我自己）更喜欢这样的解决方案。

标签： javascript html forms

【解决方案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>

【讨论】：

@Dasein 和 devkaoru，我认为您的建议会起作用，但是现在当我按原样插入 javascript 时，它会使我的页面加载出现错误“document.getElementById(...) is null” .知道为什么会发生这种情况，我确定“myForm”表单的名称是正确的吗？
你的脚本很可能在你的 DOM 准备好之前加载。使用准备就绪事件来防止这种情况：stackoverflow.com/questions/9899372/…
我不喜欢这个解决方案，因为它会阻止通过按提交按钮上的输入来提交表单。这可能会使无法使用鼠标的用户（包括使用控制台浏览器的用户、残障用户等）无法提交表单。即使对于可以使用鼠标的用户来说，这也是一种不直观的行为。

【解决方案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;
     }
}

【讨论】：

不，抱歉，它不起作用。表单仍然提交。但奇怪的是我也没有看到警报。
是的，我确实将 getElementbyId 的参数更改为“JoeText”。
奇怪的是，它对我有用，你可以在这里查看：jsfiddle.net/a70wuoo9/1
此解决方案还可以防止用户在在提交按钮具有焦点时按下回车键时有意提交表单，这对用户来说是一个主要的可访问性问题没有鼠标，对于一些使用鼠标的用户来说，这可能是一个较小的用户体验问题。

【解决方案3】：

如果您包含提交按钮，则默认表单行为是在输入键上提交。为了防止意外提交，您可以在 onsubmit 事件中添加一个确认对话框（表格 A）。另一种选择是用您自己的（表单 B）替换提交按钮。但是，用户随后需要单击按钮来提交。

运行 sn-p 进行测试 （在 Chrome、Firefox 和 IE 5-11 中测试）

<html>
<body>
Form A: This form submits on enter key    
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')">
    <input type="text" >
    <input type="text" >
    <input type="submit">
</form>
<p>
Form B: This form submits only on button click<br>
<form action="hanlder.aspx" method="post" >
    <input type="text" >
    <input type="text" >
    <input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()">
</form>
    
</body>
</html>

【讨论】：

【解决方案4】：

我很惊讶没有人提供一种解决方案来实现通过在文本字段上按 Enter 来防止意外提交，同时在提交按钮具有焦点时通过按 Enter 来防止故意提交的预期效果 .

为此，我建议：

function submitFunction(e)
{
    if(document.activeElement!=document.getElementById('submit')) e.preventDefault();
}

惰性解决方案（虽然有效，但通常会导致代码的可扩展性降低或需要维护更多工作）是将其放在<form> 元素的onsubmit 属性中。通常更好的解决方案是使用addEventListener 将函数作为监听器添加到表单元素：

document.getElementById('myForm').addEventListener('submit', submitFunction);

无论您选择哪种方法来调用该函数，请确保在您的 HTML 中为提交按钮提供一个 ID：

<input type="submit" id="submit" />

我更喜欢这个解决方案，因为它允许用户通过在表单中跳动然后在突出显示提交按钮时按 Enter 来提交表单的预期行为，并且它还允许单击提交按钮，因为该元素在这两种情况下都会获得焦点，但它可以防止意外提交，因为提交元素在这些情况下不会获得焦点。

这是对可访问性的改进，对于残疾用户、使用纯文本控制台浏览器的用户、没有鼠标的用户来说可能很重要，并且对于使用不可靠或不方便鼠标的用户仍然可以得到显着改进。它发生的次数比你想象的要多。另外，一些用户只是喜欢能够以这种方式导航，所以不破坏这种行为是对用户体验的改进。

【讨论】：

【解决方案5】：

下面的代码sn-p怎么样

 <form method="POST">
<div style="display: none;">
   <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
</form>

【讨论】：