Question

如果我点击提交它的按钮，我有一个当前不刷新页面的表单。但是如果我在聚焦文本输入时按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>

感谢您的高级帮助！

Answer 1

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

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

<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事件处理程序而不是内联事件处理程序

Answer 2

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

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

Answer 4

尝试类似

的内容

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

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

4 个答案: