处理用户在 ASP.NET MVC 网站中点击“Enter”键答案

【问题标题】：Handle user hitting 'Enter' key in a ASP.NET MVC web site处理用户在 ASP.NET MVC 网站中点击“Enter”键
【发布时间】：2010-11-05 16:32:48
【问题描述】：

我正在开发一个具有多个提交按钮的 ASP.NET MVC 网站。即

    <input type="submit" name="SubmitButton" value="Reset" />
    <input type="submit" name="SubmitButton" value="OK" />
    <input type="submit" name="SubmitButton" value="Back" />

我需要允许用户通过按“Enter”键快速提交表单。 HTML 标准似乎指定如果用户按下“Enter”键，将假定第一个提交按钮。但是，我需要将第二个按钮（即“确定”）按钮设置为默认按钮，出于我什至不想谈论的原因，更改按钮顺序不是一种选择。

我搜索了一下，发现 this post 关于在 ASP.NET 中使用 Page.Form.DefaultButton 但这不适用于 ASP.NET MVC。

我还尝试了以下 javascript 解决方案，虽然它适用于 Chrome，但不适用于 IE6

    $('body').keypress(function(e) {
       if (e.which === 13) {
          $("input[value='OK']").trigger('click');
       }
    });

我可以想到一些非常极端的解决方案，例如遍历表单中的每个控件，然后将上述功能附加到它们。但是，我认为这不是一个非常巧妙的解决方案，所以我想知道有没有人有更好的解决方案？

【问题讨论】：

如果这真的应该是一个经典的重置按钮，你应该强烈考虑删除它：useit.com/alertbox/20000416.html

标签： asp.net javascript jquery asp.net-mvc

【解决方案1】：

首先，这是错误的：

<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />

这三个都是提交按钮。重置是 type="reset" 的输入。把它整理好。其次，我已经成功地实现了类似的东西，它适用于 IE6。试试这个：

    function keypressHandler(e)
    {
        if(e.which == 13) {
            e.preventDefault(); //stops default action: submitting form
            $(this).blur();
            $('#SubmitButton').focus().click();//give your submit an ID
        }
    }

    $('#myForm').keypress(keypressHandler);

focus() 部分使按钮在用户按下回车时看起来被按下。相当漂亮。

【讨论】：

@kuoson - 只是一个想法，但也许您的代码实际上正在运行，并且“===”运算符正在破坏您的按键处理程序中的条件。在发布我的答案之前，我实际上想知道这一点。

【解决方案2】：

使用这个。

$(function(){
    $('input').keydown(function(e){
        if (e.keyCode == 13) {
            $("input[value='OK']").focus().click();
            return false;
        }
    });
});

【讨论】：

根本没有cmets？ input 代表什么？

【解决方案3】：

您应该只有一个提交按钮。重置按钮应该是type="reset"，后退按钮应该是type="button"，如下所示：

<input type="reset" name="ResetButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="button" name="BackButton" value="Back" />

然后，Reset 和 OK 将按照它们应有的方式工作，您只需要使用 Javascript 处理后退按钮单击。

编辑： 另一种选择是将“重置”和“返回”提交按钮分别放置在 iframe 内各自的表单中。然后它们将被主窗体忽略并且不会是默认按钮。此外，如果需要，这将允许您将它们指向不同的服务器操作，并且按钮操作不会依赖 Javascript。

【讨论】：

我也需要重置为提交按钮，因为我也需要清除一些会话数据，但谢谢 +1

【解决方案4】：

HTML 标准似乎规定了第一个提交按钮将是假设用户按下“Enter” 键。

不，回车键的用法没有定义，它是在各种解释下添加的专有扩展。您将在不同的浏览器中获得不同的行为（当您开始混合有关从左到右/从右到左的选项顺序的不同文化或 UI 约定时，它会变得非常危险）。

如果表单上只有 1 个按钮，那么所有主流浏览器都会遵循相同的行为 - 他们提交表单时就像按下了该按钮一样（表单数据中包含 buttonName=buttonValue）。当然，这并不意味着按钮 onclick 处理程序会触发 - 行为是特定于浏览器的。

当有几个按钮时，这完全是废话。一些浏览器决定第一个按钮（第一个的定义可能会有所不同 - 大多数使用 Html 树中提到的第一个按钮，而其他浏览器则尝试使用屏幕位置）被点击并在提交中使用它，而其他浏览器（尤其是 IE 的某些版本）做出同样正确的假设，即 没有按下特定按钮，因此不包含 buttonName=buttonValue （表单的其余部分可以正常提交） .

【讨论】：

【解决方案5】：

由于你使用jquery，如果你使用hotkeys plugin，你可以做出这样的做法：

$(document).bind('keydown', 'return', function (evt){
    $.next("input[value='OK']").trigger("click");
    return false;
});

【讨论】：

'next' 不再在 jquery 的范围内，但删除它就可以了。

【解决方案6】：

在源代码中更改按钮顺序但不是在视觉上（即使用 CSS 交换按钮）？

【讨论】：