Tab 并 Enter 点击 html 表单中的不同提交按钮（所有浏览器）

Question

我遇到了所有浏览器中都会出现的问题。

我正在使用 ASP.NET MVC。

我的控制器呈现一个带有各种提交按钮的 html 表单（其原因在下面的附录中解释）。

虽然在正确的情况下按 Tab 键会将焦点发送到正确的提交按钮，但按 Enter 键似乎会使用错误的按钮提交表单。我可以使用 HttpContext.Request.Params 集合判断哪个按钮提交了表单，如下所示：

        foreach (var step in WizardSteps)
        {
            // A naming convention links the step action to the button name.
            // If returns null, then it was a Next or Previous button
            string s = step.Value.ActionName;
            if (ControllerContext.HttpContext.Request.Params[s + "Button"] != null)
            {
                return s;
            }
        }
        return null;

[我正在 ASP.NET MVC 中设计一个向导框架，因此使用 WizardSteps 集合。请参阅附录]

摘要：

问题是，如果用户只是从最后一个输入控件中按回车键，则使用错误的按钮提交表单，而不是使用呈现的 html 中后面的提交按钮（即“NEXT >>”按钮）。按 T​​ab 键会将焦点发送到正确的控件。

按 Tab 键和 Enter 键肯定会将焦点发送到同一个位置吗？

你能想到发生了什么吗？选项卡按正确的顺序发生，因此这不是问题。

请注意：由于这是一个 HTML 问题，因此尝试通过 jQuery 解决它是没有用的。

附录：

我正在为 ASP.NET MVC 设计一个向导框架。我需要很多向导，所以付出额外的努力是值得的。我有一个足够智能的基本控制器，可以弄清楚有哪些步骤以及按什么顺序（它使用属性和反射构建 WizardSteps）。一切正常，但是...

之前的问题已解决（只有一个文本输入控件在 IE 中产生错误）。但现在这让我感到困惑：任何框架都必须产生标准行为。

这些是 HTML 问题，所以请不要使用 jQuery。

表单的源代码：

<div id="wizardStep">
    <form action="/Membership/Form" id="wizardForm" method="post" name="wizardForm" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
    onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: &#39;wizardStep&#39; });">
    <input name="wizardData" type="hidden" value="EncryptedFormValuesGobbleDeGooke" />
    <div class="WizardNavigator">
        <input type="submit" class="Before" name="StartButton" id="StartButton" value="Start" />
        <input type="submit" class="Before" name="CategoryButton" id="CategoryButton" value="Category" />
        <input type="button" class="Current" name="ContactDetailsButton" id="ContactDetailsButton" value="Contact Details" />
        <input type="button" class="After" name="IllnessDetailsButton" id="IllnessDetailsButton" value="Illness Details" />
        <input type="button" class="After" name="LinkUpButton" id="LinkUpButton" value="Link Up" />
        <input type="button" class="After" name="ConfirmButton" id="ConfirmButton" value="Confirm" />
        <input type="button" class="After" name="CompleteButton" id="CompleteButton" value="Done!" />
    </div>
    <div class="WizardButtons">
        <input class="Start" type="submit" value="Start >>" title="Start >>" name="topNextButton"
            id="topNextButton" />
    </div>
    <p>
        Please enter the details of the person to whom newsletter and other information
        should be sent;</p>
    <fieldset>
        <legend>Name</legend>
        <div class="editor-label">
            <label for="Title">
                Title</label>
        </div>
        <div class="editor-field">
            <input id="Title" name="Title" type="text" value="" />
        </div>
        <div class="editor-label">
            <label for="FirstName">
                First Name</label>
        </div>
        <div class="editor-field">
            <input id="FirstName" name="FirstName" type="text" value="" />
        </div>
        <div class="editor-label">
            <label for="LastName">
                Last Name</label>
        </div>
        <div class="editor-field">
            <input id="LastName" name="LastName" type="text" value="" />
        </div>
    </fieldset>
    <fieldset>
        <legend>Postal Address</legend>
        <div class="editor-label">
            <label for="Address">
                Address</label>
        </div>
        <div class="editor-field">
            <textarea cols="40" id="Address" name="Address" rows="10"></textarea>
        </div>
        <div class="editor-label">
            <label for="Postcode">
                Postcode</label>
        </div>
        <div class="editor-field">
            <input id="Postcode" name="Postcode" type="text" value="" />
        </div>
    </fieldset>
    <fieldset>
        <legend>Comm Details</legend>
        <div class="editor-label">
            <label for="Email">
                Email</label>
        </div>
        <div class="editor-field">
            <input id="Email" name="Email" type="text" value="" />
        </div>
        <div class="editor-label">
            <label for="Telephone">
                Telephone</label>
        </div>
        <div class="editor-field">
            <input id="Telephone" name="Telephone" type="text" value="" />
        </div>
    </fieldset>
    <div class="WizardButtons">
        <input class="Start" type="submit" value="Start >>" title="Start >>" name="NextButton"
            id="NextButton" />
    </div>
    </form>
</div>

问题是，当用户在电话文本输入中按下 Enter 键时，表单会提交，就像单击了 StartButton 提交按钮一样。

这是错误的，我看不出 html 有任何问题会导致这种情况。正确按下 Tab 键会将焦点发送到 NextButton 提交按钮。

Answer 1

在具有多种表单的页面上发帖时，IE 经常会出现一些问题。
鉴于此，您无法采取太多措施来使这种行为成为常态。

如果您正在开发某种框架，那么在填写表单（例如通过 JS）并让所有提交都转到同一个处理程序时标记隐藏字段可能是一个更好的主意。

然后您可以读取设置的标志并依次处理表单。

Answer 2

克里斯给了我解决这个问题的提示，这反过来又给了我谷歌搜索的单词。

我预计 HTML 表单中的 Enter 键会有默认行为。嗯，有，但不是我所期望的。

用户按下 ENTER 键时的 HTML 表单默认行为：

表单将使用 html 流程中的第一个提交按钮提交。它没有达到我的预期，即 HTML 中的下一个提交按钮位于用户按 Enter 键的文本输入控件之后。

我已经在我能接触到的每一个现代浏览器中测试了这种行为，并且它似乎有效。

许多博客都支持这种观点，特别是：

Html Workaround for HTML forms with multiple提交按钮和输入关键行为

我已使用该帖子中推荐的解决方法。即，将提交按钮放置在表单的最顶部，通过将其放置在高度和宽度设置为 0 的 div 标签中来“隐藏”：

<div style="height:0px; width:0px; position:absolute; overflow:hidden">
    <input type="submit" />
</div>

这在所有浏览器中都有效，并且我的 MVC 向导框架已接近完成。

重要提示：您必须确保这是表单中的第一个提交按钮！否则，这个解决方法将不起作用。

WIND BAG 部分：

我认为这是 MVC 的伟大之处之一：它迫使您理解 HTML，而这正是我赖以生存的地方。

我希望这对其他人有帮助。

感谢：

克里斯指出了错误，并感谢马修史密斯对不同问题提出了类似的建议。

另外，针对伊恩巴拉德关于多种形式的回答。我会记录下来，但这里的问题与多个表单无关，而是与多个提交按钮有关。