当 Enter 键已被禁用时，jQuery 在按下 Enter 键后禁用 Enter 键

Question

我已经禁用了回车键，以便可以执行 ajax 提交，但我想确保如果用户在服务器响应返回之前按两次回车键，则表单不会提交两次。

在这里，我禁用了 Enter 键并为其分配了一个名为 submitForm() 的函数：

$(document).ready(function(){
    offset = $("#quantity").html();
    $("#lastName").focus();
    $(document).bind("keypress" , function(e){
        if (e.which == 13 && (!$("#notes").is(":focus")) && (!$("#submit").is(":focus"))) {
            submitForm(); return false;
        }
    })
    $("#submit").click(function(){ submitForm(); });
});

我尝试在其他地方再次 bind()，但它没有执行任何操作。我在不同的地方尝试了 preventDefault() ，但我认为我要么把它放在错误的地方，要么这是错误的做法。我似乎无法让它发挥作用。

我发现了这个： 如何在执行函数后禁用 Enter/Return 键？，但它没有回答我的问题，因为在海报的示例中，脚本检查框中是否有任何内容，但我想检查一下我是否已提交或未提交。我不知道该怎么做。我真正想做的是禁用回车键，直到我收到服务器对 ajax 调用的回复。这是submitForm()：

function submitForm() {
    $.post("/ajax/files" , $("#files").serialize(), function(data){
        filesReset();
        if (data != "") {
            $("#lastInsert table tbody:last").prepend(data);
            $("#lastInsert table tbody:last tr:first").find("td").hide();
            $("#lastInsert table tbody:last tr:first").find("td").fadeIn(1000);
            $("#lastInsert table tbody:last tr:first").effect("highlight" , {"color": "aqua"}, 1000);

            $("#lastInsert table tbody:last tr:last").remove();
        } else {
            alert("Insert rejected: either insufficient criteria or the server is down.");
            $("#hidden").click();
        }
    });
}

我不想在服务器端做任何事情，因为我需要这个提交功能尽可能快（这将是一个快节奏的数据输入表单）。

Answer 1

使用这样的变量：

$(function(){

    var running = false;

    $(document).bind("keypress" , function(e){
        if (e.which == 13) {
            if(running === false) {
                running = true;
                submitForm();
            }
            return false;
        }
    })

    $("#submit").click(function(){
        if(running === false) {
            running = true;
            submitForm(); 
        }
    });

});

Answer 2

将您的提交按钮更改为常规按钮并使用onclick事件通过JavaScript提交表单会更容易。这样按 Enter 键什么也不做。单击按钮时禁用该按钮，并在 Ajax 调用成功时启用它。