有两个按钮时如何使用回车键提交答案

【问题标题】：How to submit using the enter key when there are two buttons有两个按钮时如何使用回车键提交
【发布时间】：2012-07-21 22:27:39
【问题描述】：

我有两个不同的输入字段，有各自的提交按钮，我希望用户能够将他们的输入输入到任何一个文本框中，然后按回车键并具有与单击相同的效果在提交按钮上。目前，在文本框中输入一些内容并按回车键没有任何作用。我正在使用 HTML 和 JavaScript 以及 ASP .NET MVC3。我的代码如下所示：

HTML

<table>
<tr>
    <td><span class="labelText">Text1</span></td> <td><input id="text1" type="text" placeholder="Enter Text1"/> </td> <td style="width: 110px; text-align: left; margin-left: 5px"><button class="medium awesome blue" id="sendText1">Send Text1</button></td>
</tr>
<tr>
   <td> <span class="labelText">Text2</span> </td> <td><input id="text2" type="text" placeholder="Enter Text2"/> </td>   <td style="width: 110px; text-align: left; margin-left: 5px"> <button class="medium awesome blue" id="sendText2">Send Text2</button> </td>
</tr>

JavaScript

$('#sendText1').click(function () {
        $('#text2').val("");
        var text1 = $("#text1").val();
        $('#loadingUsageInfo').css({ 'visibility': 'visible' });
        if (text1 == "" || text1 == 'Enter Text1') {
            alert('Enter Text First');
            return;
        }
        $.ajax({
            url: '@Url.Action("ShowResult1", "Folder")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ input1: text1 }),
            traditional: true,
            success: function (result) {
                $('#info').html(result);
            }
        });
    });

    $('#sendText2').click(function () {
        $('#text2').val("");
        var text2 = $("#text2").val();
        $('#loadingUsageInfo').css({ 'visibility': 'visible' });
        if (text2 == "" || text2 == 'Enter Text2') {
            alert('Enter Text First');
            return;
        }

        $.ajax({
            url: '@Url.Action("ShowResult2", "Folder")',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ input2: text2 }),
            traditional: true,
            success: function (result) {
                $('#info').html(result);
            }
        });
    });

提前致谢！

【问题讨论】：

标签： javascript html asp.net-mvc-3

【解决方案1】：

在你的 js 代码下面添加这个

$('#text1, #text2').keypress(function(e) {
  if (e.which == 13) {
    $('#sendText1, #sendText2').trigger('click');
  }       
});

Trigger - 执行所有附加到给定事件类型的匹配元素的处理程序和行为。

所以我们在按键上绑定两个文本输入并调用按钮的所有绑定。

另请参阅jsFiddle 上的工作原理

【讨论】：

谢谢你，马克西姆！这真的很有帮助。
不客气。不要忘记将其标记为最佳答案；））谢谢。

【解决方案2】：

您的文本字段不知道它们应该在某处提交值。你可以通过form标签包围他们来让他们知道。

【讨论】：

【解决方案3】：

我最终做了这样的事情。

$("#textbox").keypress(function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 13) {
        e.preventDefault();
        $("#btn").trigger("click");
    }
});

【讨论】：