Question

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

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

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

Answer 2

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

Answer 3

我猜猜一个表单元素会触发提交事件，它不会通过表格冒泡到表单上，试试这个实例：

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

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

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

Answer 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和NAME用于不同的表单。最初，它们是<INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');">但是一旦我添加了唯一的ID和NAMES，例如“formD1”等，它们就开始正常工作了。

Answer 5

这适合我。

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

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

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

6 个答案: