нажмите вкладку и введите другую кнопку отправки в HTML-форме (все браузеры) - PullRequest
0 голосов
/ 14 сентября 2010

У меня проблема, которая появляется во всех браузерах.

Я работаю с ASP.NET MVC.

Мой контроллер отображает HTML-форму с различными кнопками отправки (причина этого объясняется в Приложении ниже).

В то время как табуляция направляет фокус на правильную кнопку отправки при правильных обстоятельствах, нажатие клавиши ввода, похоже, отправляет форму с использованием неправильной кнопки. Я могу определить, какая кнопка отправила форму, используя коллекцию 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 (т. Е. "СЛЕДУЮЩАЯ >>" кнопка). Нажатие клавиши 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.

Что не так, и я не вижу каких-либо проблем с HTML, чтобы вызвать это. Правильное нажатие клавиши Tab отправляет фокус на кнопку отправки NextButton.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2010

Крис дал мне подсказку для решения этой проблемы, которая, в свою очередь, дала мне слова для google.

Я ожидал, что было стандартное поведение с клавишей Enter с HTML-формами.Ну, есть, но не то, что я ожидал.

ПОВЕДЕНИЕ ФОРМЫ HTML ФОРМЫ ПО УМОЛЧАНИЮ ПОЛЬЗОВАТЕЛЯ ВВОДИТЕ КЛЮЧ:

Форма будет отправлена ​​с помощью кнопки ПЕРВАЯ отправка в потоке HTML.Это НЕ делает то, что я ожидал, что следующая кнопка отправки в HTML после элемента управления вводом текста, где пользователь нажимал ввод.

Я проверил это поведение в каждом современном браузере, на который могу положитьсяи похоже, что это так.

Некоторые блоги поддерживают это представление, в частности:

Обходной путь HTML для форм с несколькими кнопками отправки и поведением клавиши Enter

Я использовал рекомендованный обходной путь в этом посте.Т.е., поместив кнопку отправки в самом верху формы, «скрываем», поместив ее в тег div с высотой и шириной, равными 0:

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

. Это работает угощение во всех браузерах и моихСреда MVC wizard приблизилась к завершению.

ВАЖНО: Вы ДОЛЖНЫ убедиться, что это ПЕРВАЯ кнопка отправки в форме !!В противном случае этот обходной путь не сработает.

РАЗДЕЛ СУМКИ ВЕТРА:

Я думаю, что это одна из замечательных особенностей MVC: она заставляет вас понимать HTML, которыйчем я живу

Я надеюсь, что это поможет кому-то еще.

СПАСИБО:

Крису за то, что он указал ошибку, и Мэтью Смиту за аналогичное предложение по другой проблеме.

Кроме того, к ответу Иана Балларда о множественных формах.Я буду хранить это в записи, но проблема здесь не была связана с несколькими формами, а скорее с несколькими кнопками отправки.

0 голосов
/ 14 сентября 2010

IE часто немного проблематичен при публикации на страницах с несколькими формами.Учитывая это, вы не можете сделать что-то, чтобы сделать поведение регулярным.

Если вы разрабатываете какую-то структуру фреймворка, возможно, было бы лучше пометить скрытое поле, когда ваша формазаполняется (например, через JS), и все отправки отправляются в один и тот же обработчик.

Затем вы можете читать установленные флаги и обрабатывать формы по очереди.

...