logo标签列表

防止在文本框中按下回车键提交表单

javascripthtmlforms
15

我知道这个问题以前已经被问过了，但我没有找到适合我的情况的令人满意的答案。所以我再次提出这个问题。

我有一个简单的表单，包含两个文本框和一个提交按钮。用户在任一文本框中输入文本后，不应该能够通过按回车键进行提交，只有提交按钮才允许他们提交。我认为捕获回车键并从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（最新版本）上都进行了测试。

请问您能否向我展示如何防止表单提交？

谢谢。

2
可能是 防止用户按回车键提交表单的方法 的重复内容。 - Dan
1
首先，我认为你想要使用onkeypress或onkeydown而不是onchange。其次，在你的“doNotSubmit”函数中，“e”从哪里来？ - ray
@Dan 那个问题并不是真正的重复，因为它在问题和标签中明确提到了jQuery，而这个问题则没有提到。至少，提出这个问题的人对非jQuery解决方案持开放态度，而许多人（比如我自己）更喜欢这样的解决方案。 - cazort
6个回答
29

为了借鉴@Dasein的答案，您需要防止默认行为而不是停止事件传播（即返回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（...）为空”。有任何想法为什么会发生这种情况吗？我确定表单名称“myForm”是正确的。 - AbuMariam
1
你的脚本很可能在DOM准备好之前加载。使用on ready事件来防止这种情况发生：https://dev59.com/PWkw5IYBdhLWcg3wbqAS - devkaoru
1
我不喜欢这个解决方案，因为它阻止了通过在“提交按钮”上按Enter键来提交表单。这可能会使没有鼠标访问权限的用户无法提交表单，包括使用控制台浏览器、残障人士等。即使对于有鼠标访问权限的用户，这也是不直观的行为。 - cazort
4

对于使用React的人：

    <form
      onSubmit={handleSubmit(onSubmit)}
      onKeyDown={e => {
        if (e.key === 'Enter') {
          // Keeps form from submiting on hitting enter
          e.preventDefault();
        }
      }}
    >
1
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community
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;
     }
}
不好意思，它不起作用。表单仍然会提交。但奇怪的是我也没有看到警报。 - AbuMariam
是的，我确实将getElementbyId的参数更改为“JoeText”。 - AbuMariam
有趣的是，它在我的电脑上运行正常，您可以在这里查看：http://jsfiddle.net/a70wuoo9/1/ - user2755140
此解决方案还可以防止用户在提交按钮获得焦点时按下回车键而故意提交表单，这是对没有鼠标的用户的主要辅助功能问题，对于一些使用鼠标的用户可能是次要的用户体验问题。 - cazort
1
如果您包含一个提交按钮，那么默认的表单行为是在按下回车键时提交。为了防止意外提交，您可以在 onsubmit 事件中添加确认对话框（表单 A）。另一种选择是用自己的按钮替换提交按钮（表单 B）。但是，用户需要点击该按钮才能提交。 运行代码段进行测试 （已在 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>

0

我很惊讶没有人提供一种解决方案来实现所需的效果，即通过在文本字段上按Enter键防止意外提交，而不会阻止在提交按钮具有焦点的情况下进行有意提交。

为此，我建议：

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

懒惰的解决方案是将此代码放在
元素的onsubmit属性中，这种方法虽然可行，但通常会导致代码不够可扩展或难以维护。更好的解决方案通常是使用addEventListener将函数作为监听器添加到表单元素中：
document.getElementById('myForm').addEventListener('submit', submitFunction);

无论您选择哪种方法来调用函数，在 HTML 中确保为提交按钮赋予一个 ID：
<input type="submit" id="submit" />

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

这是对可访问性的改进，对于残障用户、使用纯文本控制台浏览器的用户、没有鼠标的用户来说可能非常重要，对于鼠标不可靠或不方便的用户来说，仍然是一个显著的改进。这种情况比你想象的要多。此外，一些用户只是喜欢能够以这种方式导航，因此不打破这种行为是用户体验的改进。

0
以下代码片段怎么样？
 <form method="POST">
<div style="display: none;">
   <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
</form>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接