вкладка и введите нажмите другую кнопку отправки в форме html (все браузеры)

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

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

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

В то время как табуляция направляет фокус на правильную кнопку отправки при правильных обстоятельствах, нажатие 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 (то есть, кнопка «ДАЛЕЕ >>»). Нажатие клавиши 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, которые могли бы вызвать это. Правильное нажатие клавиши табуляции отправляет фокус на кнопку отправки NextButton.


person awrigley    schedule 14.09.2010    source источник
comment
он всегда отправляет одно и то же неправильное значение? Всегда ли это первое или последнее значение кнопки?   -  person Grumpy    schedule 14.09.2010
comment
Не могли бы вы добавить исходный HTML-код формы? Это может быть вопрос последовательности в доме ...   -  person Martin Hennings    schedule 14.09.2010
comment
По моему опыту, нажатие Enter в форме приведет к первому вводу type = submit в форме. Вот почему, если у меня есть более одной кнопки в форме, возможно, обновление и удаление, я сначала помещаю обновление, поскольку обычно это то, что пользователь хочет не удалять.   -  person Chris    schedule 14.09.2010
comment
Крис, это звучит удручающе, как ответ. Я попробую без кнопок навигации и отчитаюсь.   -  person awrigley    schedule 14.09.2010


Ответы (2)


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

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

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

person Iain Ballard    schedule 14.09.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 постепенно приближается к завершению.

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

СЕКЦИЯ ВЕТРОВОЙ СУМКИ:

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

Надеюсь, это поможет кому-то другому.

БЛАГОДАРНОСТЬ:

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

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

person awrigley    schedule 14.09.2010