5

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

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

6 回答 6

9 
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;
});
于 2012-04-25T09:43:53.767 回答
3

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

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

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

正如 gordan 在另一条评论中所说， return false 两者.preventDefault()兼而有之.stopPropagation()

于 2012-04-25T09:42:23.057 回答
2

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

于 2012-04-25T09:42:22.327 回答
1

我发现这个 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 将重新加载正确的数据。点击回车会导致默认操作并重新加载整个页面，只剩下 1 个 div。

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

于 2014-06-03T07:42:19.807 回答
0

这对我有用。

$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; });
于 2014-06-20T10:13:33.040 回答
0

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

<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>
于 2015-08-12T09:07:33.877 回答