停止输入/返回键提交表单

Stop Enter/Return key submitting a form

本文关键字：提交 表单 返回 输入      更新时间：2023-09-26

我在表单中有一个表。该表包含一些表单字段，但表格外部（但仍在表单内）也有表单字段。

我知道 Enter 和 Return 传统上用于通过键盘提交表单，但我想停止表中字段的这种行为。例如，如果我聚焦表中的字段并按 Enter/Return 键，则没有任何反应。如果我将字段集中在表格之外（但仍在表单内），那么它就会正常提交。

我有一个针对此表的jQuery插件。简化，这是我到目前为止尝试过的：

base.on('keydown', function(e) {
    if (e.keyCode == 13) {
        e.stopPropagation();
        return false;
    }
});

其中base是表 jQuery 对象。这在我的插件的init方法中。但是，按 Enter 仍会提交表单。

我哪里出错了？

编辑：一些简化的HTML：

<form method="" action="">
  <input type="text" /><!--this should still submit on Enter-->
  <table>
    <tbody>
      <tr>
        <td>
          <input type="text" /><!--this should NOT submit on Enter-->
        </td>
      </tr>
    </tbody>
  </table>
</form>

base.keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 13)
        return false;
});

或仅针对输入：

$(':input', base).keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 13)
        return false;
});

我猜表单元素会触发提交事件，它不会通过表向上冒泡并进入表单，请尝试以下原因：

$('input, select, textarea', base).on('keydown', function(e) {
    if (e.keyCode == 13) {
        return false;
    }
});

请注意，我们还为选择器提供了上下文，因此此keyDown只会发生在表中的元素（根据需要修改）上。

正如 gordan 在另一条评论中所说，返回 false 既.preventDefault()又.stopPropagation()

e.preventDefault()而不是e.stopPropagation() . stopPropagation 只会阻止它冒泡到更高的 DOM 节点，它不会阻止默认操作。

我发现这个问答试图解决类似的情况，我有多个表格并且输入不会做我想要的。在我的特定情况下，我会动态添加一个新的 <div id="D1"> D1、D2、D3 等，每个新的div 都有一个表单，可以从创建它的相同 php 代码重新加载该div，只是也带有 POST。

不相关的第一个问题是我无法为每个div 动态创建一个新函数，所以我将 D1 等描述符作为参数传递给 Javascript 函数：

<script type="text/javascript">
function formSubmit ( divid ) {
    // post data
    event.preventDefault();
    $.post( "make-my-form-div.php", 
            $("#form"+divid).serialize(), 
            function(data){
                $("#"+divid).html(data);
            });
    return false;
}
</script>

您将看到适用于此线程中答案的必要event.preventDefault();和return false;。它对我不起作用。如果我单击任何一个表单的提交，该div 将使用正确的数据重新加载。按回车键会导致默认操作并重新加载整个页面，只剩下 1 个div。

这个答案有效：我需要为不同的表单提供一个唯一的 ID 和 NAME。最初，它们是<INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');">但是一旦我添加了唯一的ID和名称，例如"formD1"等，它就开始正常工作。

这对

我有用。

$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; });

只需将以下代码放在模板文件或页面标题中即可。

<script type="text/javascript">
function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
}
document.onkeypress = stopRKey;
</script>
相关文章：