Question

我的问题出现在所有浏览器中。

我正在使用ASP.NET MVC。

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

虽然Tabbing在正确的情况下将焦点发送到右侧提交按钮，但是按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集合。见附录]

内容：

问题在于，如果用户只是从最后一个输入控件点击进入，则使用WRONG按钮提交表单，而不是使用呈现的html中的提交按钮（即“NEXT＆gt;＆gt;” ;“按钮）。按Tab键可将焦点发送到正确的控件。

肯定按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提交按钮一样。

哪个错了，我看不出有什么问题导致这个问题。正确点击Tab键会将焦点发送到NextButton提交按钮。

Answer 1

在具有多个表单的页面上发布时，IE通常会有点问题。鉴于此，你可以做很多事情来使这种行为成为常规。

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

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

Answer 2

克里斯给了我解决这个问题的提示，这反过来给了我谷歌的话。

我原以为使用带有HTML表单的Enter键存在默认行为。嗯，有，但不是我的预期。

当用户输入密钥时

HTML表单默认行为：

表单将使用html流程中的FIRST提交按钮提交。它没有按照我的预期进行，这是用户点击输入的文本输入控件后HTML中的下一个提交按钮。

我已经在每个现有的浏览器中测试了这种行为，我可以把它放在手上，而且它似乎已经存在。

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

Html Workaround for HTML forms with multiple submit buttons and Enter key behaviour

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

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

这适用于所有浏览器，我的MVC向导框架已接近完成。

重要提示：您必须确保这是表单中的第一个提交按钮!!否则，此解决方法将无效。

风袋部分：

我认为这是MVC的一大优点：它会迫使你理解HTML，这就是我的生活。

我希望这有助于其他人。

感谢：

向Chris指出错误，并向Matthew Smith提出类似建议以解决其他问题。

另外，Iain Ballard关于多种形式的答案。我会保留记录，但这里的问题与多个表单无关，而是多个提交按钮。

选项卡并以html格式输入命中不同的提交按钮（所有浏览器）

2 个答案: