停止输入/返回键提交表单[重复]

Posted 2023-02-22

【中文标题】停止输入/返回键提交表单[重复]

【英文标题】：Stop Enter/Return key submitting a form [duplicate]

【发布时间】：2012-05-05 23:34:31

【问题描述】：

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

我知道 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>

【问题讨论】：

***.com/questions/1563062/… 和 ***.com/questions/895171/… 的可能重复

你应该提到base是什么，它看起来像一个jquery对象但它不遵循naming conventions。

@gdoron 我做到了。这是第一个代码块之后的第一句话！ "base 是表 jQuery 对象。"

@MartinBean。抱歉，但命名约定是您真正想要遵循的。对不起，我很笨。

@gdoron 正如我所说，javascript 被简化了，但 base 名称来自这个插件开始：starter.pixelgraphics.us

【参考方案1】：

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;
);

【讨论】：

请重新阅读问题。我仍然希望默认行为适用于我的表格之外的表单控件。

所以当按下回车键时，你需要检查表格中的任何元素（输入）是否处于焦点状态

@gdoron 我不能从我的插件向上执行此操作，而不是从表单向下执行吗？例如，我不希望它应用于带有表格的 any 表单的输入。

@gdoron 我想停止在我的插件应用到的表中提交输入，而不仅仅是表单中具有输入的任何表。

完美。最后到了那里。我将我的keyup 事件名称更改为keypress，现在我拥有了我想要的功能。谢谢！

【参考方案2】：

我猜一个表单元素会触发提交事件，它不会在表格中冒泡并进入表单，试试这个instread：

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

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

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

【讨论】：

您需要将选择器限制为仅在表单\表中输入。实际上它是 gdoron 而不是 gordan... :)

这就是选择器中的第二个参数base 的作用，其中base 是我作为jQuery 对象的表。

哎呀，我的名字错误：P，但它仅限于表格，因为base 是表格对象。

【参考方案3】：

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

【讨论】：

return false 两者都有...

那么如果我的代码中有return false，为什么表单还在提交？

这不是针对你的个人行为，但尽管这个答案被赞成，但它是错误的。 return false == e.preventDefault(); e.stopPropagation();

我认为你也需要重新考虑你的答案，gdoron。你的目标是任何形式的任何表格，而我只想定位我的插件应用到的表格中的输入。

【参考方案4】：

我发现这个 Q/A 试图解决一个类似的情况，即我有多个表单并且输入不会做我想要的。在我的具体情况下，我将动态添加一个新的<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 将重新加载正确的数据。按 Enter 会导致默认操作并重新加载整个页面，只剩下 1 个 div。

This Answer worked：我需要不同表单的唯一 ID 和名称。最初，它们是<INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');">，但是一旦我添加了唯一的 ID 和名称，例如“formD1”等，它就开始正常工作了。

【参考方案5】：

这对我有用。

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

【参考方案6】：

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

<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>