Несколько кнопок отправки в форме HTML - назначьте одну кнопку по умолчанию

Question

У меня есть форма с тремя кнопками отправки следующим образом:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

Ряд кнопок представляет собой сочетание кнопок отправки, сброса и JavaScript. Порядок кнопок может быть изменен, но в любом случае кнопка сохранения остается между предыдущей и следующей кнопками. Проблема здесь в том, что когда пользователь нажимает «enter» для отправки формы, переменная post «COMMAND» содержит «Prev»; нормально, так как это первая кнопка отправки в форме. Однако я хочу, чтобы кнопка «Далее» была запущена, когда пользователь отправляет форму с помощью кнопки ввода. Вроде как установка ее в качестве кнопки отправки по умолчанию, хотя перед ней есть другие кнопки.

Answer 1

Первая кнопка всегда используется по умолчанию; это не может быть изменено. В то время как вы можете попытаться исправить это с помощью JavaScript, форма будет работать непредсказуемо в браузере без использования сценариев, и есть некоторые моменты, которые нужно учитывать. Например, код, на который ссылается Zoran, случайно отправит форму при нажатии Enter в <input type="button">, что обычно не происходит, и не поймает поведение IE при отправке формы для печати Enter для другого содержимого, не относящегося к полю. в виде. Поэтому, если вы щелкнете по тексту в <p> в форме с этим сценарием и нажмете Enter, будет отправлена ​​неправильная кнопка ... особенно опасно, если, как показано в этом примере, настоящей кнопкой по умолчанию является «Удалить»!

Мой совет - забыть об использовании скриптовых хаков для переназначения настроек по умолчанию. Перейти с потоком браузера и просто поставить кнопку по умолчанию в первую очередь. Если вы не можете взломать макет, чтобы получить нужный вам порядок на экране, то вы можете сделать это, установив сначала фиктивную невидимую кнопку в источнике с тем же именем / значением, что и кнопка, которую вы хотите использовать по умолчанию:

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(примечание: позиционирование используется для нажатия кнопки вне экрана, потому что display: none и visibility: hidden имеют побочные эффекты, зависящие от браузера, от того, используется ли кнопка по умолчанию и отправлена ​​ли она.)

Answer 2

Мое предложение - не борись с этим поведением. Вы можете эффективно изменить порядок, используя поплавки. Например:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

с:

#buttons { overflow: hidden; }
#buttons input { float: right; }

эффективно обратит порядок, и, таким образом, кнопка «Далее» будет значением, вызванным нажатием клавиши ввода.

Этот вид техники будет охватывать многие обстоятельства без необходимости прибегать к более хакерским методам Javascript.

Answer 3

Quick'n'dirty вы можете создать скрытую копию кнопки отправки, которую следует использовать при нажатии Enter.

Пример CSS

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

Пример HTML

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

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

Протестировано на IE9, Firefox, Chrome и Opera

Answer 4

Установите type=submit на кнопку, которую вы хотите использовать по умолчанию, и type=button на другие кнопки. Теперь в форме ниже вы можете нажать Enter в любых полях ввода, и кнопка Render будет работать (несмотря на то, что это вторая кнопка в форме).

Пример:

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Протестировано в FF24 и Chrome 35.

Answer 5

Если вы используете jQuery, это решение из комментария, сделанного здесь , довольно изящно:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

Просто добавьте class="default" к кнопке, которую вы хотите использовать по умолчанию. Он помещает скрытую копию этой кнопки в самом начале формы.

Answer 6

Я воскрешаю это, потому что я искал способ сделать это не на JavaScript. Мне не нравились ключевые обработчики, и CSS-позиционирование приводило к тому, что упорядочивание вкладок нарушалось, так как перестановка CSS не меняет порядок вкладок.

Мое решение основано на ответе на https://stackoverflow.com/a/9491141.

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

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

1-я кнопка в DOM 2-я кнопка в DOM 3-я кнопка в DOM

Основные CSS для этого решения:

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

Answer 7

Другое решение, использующее jQuery:

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

Это должно работать в следующих формах, делая «Обновление» действием по умолчанию:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

А также:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

Это удерживает клавишу ввода только тогда, когда поле ввода в форме имеет фокус.

Answer 8

У решения

bobince есть и обратная сторона: создание кнопки, которая может быть Tab -d, но в противном случае ее невозможно использовать. Это может создать путаницу для пользователей клавиатуры.

Другое решение заключается в использовании малоизвестного атрибута form:

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

Это стандартный HTML , однако, к сожалению, не поддерживается в Internet Explorer.

Answer 9

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

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

Поскольку я не знаю, какой язык вы используете в бэкэнде, я дам вам некоторый псевдокод:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}