如何区分输入按键和两个提交按钮上的表单提交答案

【问题标题】：how to differentiate form submition on enter keypress and two submit buttons如何区分输入按键和两个提交按钮上的表单提交
【发布时间】：2011-05-05 12:18:36
【问题描述】：

我有一个带有两个提交按钮的表单（具有不同 ID 的提交按钮）。我想采取不同的行动：

输入按键
点击提交按钮#1
点击提交按钮#2

谁能指导我，我如何通过 jQuery 实现这一点。

提前致谢

【问题讨论】：

你想采取什么行动，你尝试过什么代码，你如何根据回车键知道用户打算做什么？

标签： jquery jquery-plugins

【解决方案1】：

你可以使用这样的代码：

$(":input").bind("click keypress", function(evt) {
    var keyCode = evt.which || evt.keyCode;
    if (keyCode == 13) {
        alert("ENTER pressed");
    }
    else {
        var sender = evt.target;
        if (sender.type == "submit")
            alert("Submit button " + sender.id + " clicked");
    }
    return true;
});

通过处理click 和keypress 事件，您可以捕获所有需要的场景。

测试用例：http://jsfiddle.net/PChVY/

请注意，按 ENTER 也会触发第一个提交按钮 click 事件，因此您可以添加全局标志来忽略它。

【讨论】：

【解决方案2】：

您可以执行以下操作 (See Live Example)：

$(document).ready(function(){
    $("input[type='text'],input[type='password']").keypress(function(e){
        e.preventDefault();
        if (e.which == 13){
            alert("User pressed 'Enter' in a text input.");
            // do your custom processing here
        }
    });

    $("input[type='submit']").click(function(e){
        e.preventDefault();
        var submitClicked = e.target.id;
        alert("The submit button with id '"+submitClicked+"' was clicked!");

        //probably a switch statement here to do your custom processing based on which submit button was pressed.
    });
});

上面的代码将捕获任何文本或密码输入时的 enter 按键...将忽略 <textarea> 上的 enter 按键（我认为这是一个理想的效果）。在任何文本或密码输入上按 enter 将不会触发第一次提交按钮点击。

请注意，您必须使用$([your form selector]).submit();通过上面的代码手动提交表单

【讨论】：

【解决方案3】：

 $(function(){   
    $("input").keypress(function(e){
         if (e.which == 13){
            e.preventDefault();
            alert("pressed 'Enter' preventDefault()<br>from Form #"+this.form.id);
            // do your custom processing here
        }
    });
 });

对我来说很好，

【讨论】：