jQuery在表单上按Enter键不刷新页面？答案

【问题标题】：jQuery pressing enter on form to not refresh page?jQuery在表单上按Enter键不刷新页面？
【发布时间】：2014-02-03 11:32:58
【问题描述】：

如果我单击提交它的按钮，我有一个当前不会刷新页面的表单。但是如果我在文本输入集中时按 Enter 键，它将刷新页面。有什么办法可以让在文本输入上按 Enter 与按钮的作用相同，因此页面不会刷新？

function redeemTokens() {
var code = $("#code").val();
$.post("_post_redeemtokens.php", { code: code },
   function(data) {
     $('#resultRedeemTokens').fadeIn('slow').html(data);
   });
}

<form method="post">
    <input id="code" name="code" type="text" placeholder="Code">
    <input type="button" onclick="redeemTokens();" value="Redeem" />
</form>

感谢您的帮助！

【问题讨论】：

标签： javascript php jquery html ajax

【解决方案1】：

对表单使用提交处理程序，并从中返回 false 以防止默认提交

此方法将数据保存在表单提交上 - 即单击提交按钮以按下回车键

<form method="post" onsubmit="redeemTokens(); return false">
    <input id="code" name="code" type="text" placeholder="Code">
    <input type="submit" value="Redeem" />
</form>

或者这仅在单击按钮时保存，但在输入键时阻止表单提交

<form method="post" onsubmit="return false">
    <input id="code" name="code" type="text" placeholder="Code">
    <input type="button" onclick="redeemTokens();" value="Redeem" />
</form>

注意：由于您使用的是 jQuery，建议使用 jQuery 事件处理程序而不是内联事件处理程序

【讨论】：

谢谢兄弟，我10分钟后接你。

【解决方案2】：

$("form").submit(function(e) {
    e.preventDefault();
    redeemTokens();
});

【讨论】：

【解决方案3】：

这个怎么样？在文本字段中按 [enter] 就像单击 [tab] 键。

/* prevent Enter as Submit (on textboxes) and, instead, tab to the next field */
$("input").keypress(function(event) {
    "use strict";
    if (event.keyCode == 13)
    {
        event.preventDefault();
        var inputs = $(this).parents("form").eq(0).find(":input");
        var idx = inputs.index(this);
        if (idx == inputs.length - 1)
        {
            inputs[0].select()
        }
        else
        {
            inputs[idx + 1].focus();
            inputs[idx + 1].select();
        }
        return false;
    }
});

【讨论】：

【解决方案4】：

试试类似的东西

   $('body').keyup(function (event) {
      if (event.keyCode == '13') {
                $("form").submit ();
                // or call redeemTokens directly
            }
            return false;
      });

【讨论】：