停止输入/回车键提交表格

问题描述：

我有一张表格。该表包含一些表单字段，但表格外部还有表单字段（但仍在表单中）。停止输入/回车键提交表格

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

的可能的复制http://stackoverflow.com/questions/1563062/prevent-form-submission-with-enter-key和http://stackoverflow.com/questions/895171/prevent-users-from提交输入 – 2012-04-25 09:41:42

你应该提到什么是'base'，它看起来像一个jQuery对象，但它不遵循[命名约定]（http://stackoverflow.com/q/10204606/） 601179）。 – gdoron 2012-04-25 09:51:35

@gdoron我做到了。这是第一个代码块之后的第一句话！ “*其中'base'是表jQuery对象。*” – 2012-04-25 09:54:23

答

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-25 09:45:02

所以你需要检查当按下回车键时表格中的任何元素（输入）是否在焦点 – 2012-04-25 09:46:18

@MartinBean。固定 – gdoron 2012-04-25 09:46:37

答

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

'return false' does not them ... – gdoron 2012-04-25 09:42:49

所以如果我有在我的代码中返回false，为什么表单仍然提交？ – 2012-04-25 09:43:33

这不是针对你的人，但是虽然这个答案已被提出，但这是错误的。 'return false' =='e.preventDefault（）; e.stopPropagation（）; ' – gdoron 2012-04-25 09:50:18

答

我要去猜测，表单元素将触发提交事件，它不起泡通过表上的形式，试试这个instread：

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

注意，我们也为选择器提供上下文，所以这个keyDown只会出现在表中的元素（根据需要修改）上。

由于戈尔丹在另一条评论说，返回false确实都.preventDefault()和.stopPropagation()

您需要将选择器限制为仅在\ form表格内输入。实际上它是gdoron不是gordan ... :) – gdoron 2012-04-25 09:48:53

这就是选择器中的第二个参数'base'，在这里'base'是我的表作为一个jQuery对象。 – 2012-04-25 09:49:48

哎呀，我的名字错误：P，但它限制了表格，因为'base'是表格对象。 – 2012-04-25 09:50:10

答

我发现这个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”等，它都开始正常工作。

答

这适用于我。

$("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>

停止输入/回车键提交表格

相关推荐