Как я могу вызвать правильное действие формы, когда пользователь нажимает клавишу ввода в форме с несколькими кнопками?

Question

У меня есть форма, которую я отправляю с помощью javascript (с конкретной реакцией, но я не думаю, что это имеет значение для целей вопроса).

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

Важно отметить, что вторичная кнопка идет первой в HTML порядке , и я не могу это изменить (даже с flexbox order).

К сожалению, это означает, что, когда пользователь заканчивает ввод и нажимает Enter, срабатывает кнопка secondary .

Я слушаю form для основного действия, которое, как я думал, сработает при нажатии Enter. На дополнительной кнопке есть прослушиватель событий нажатия.

Как сделать так, чтобы основное действие формы запускалось при нажатии клавиши ввода?

Второстепенное действие должно выполняться только происходит, если пользователь нажимает эту кнопку или явно фокусируется на ней и нажимает клавишу ввода.

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

<form onSubmit={primaryAction}>

   <input ... />
   <input ... />

   <button onClick={secondaryAction}>Second action</>

   <button>Submit</button>
</form>

Я также пробовал:

• Реорганизация HTML так, чтобы первая кнопка была первой в порядке HTML. Некоторые источники говорят, что это работает, но это не вариант, потому что я использую абсолютное позиционирование в этой форме, а футзинг с порядком HTML (даже с порядком flexbox) нарушает макет.
• Использование свойства submitter в событии отправки формы. Похоже, что это пока не работает в разных браузерах.

Хорошим примером того, чего я пытаюсь достичь, является домашняя страница Deliveroo . В этой версии я вижу форму с одним вводом текста и двумя действиями (используйте мое текущее местоположение и поиск). Когда вы нажимаете Enter, запускается первичное (поисковое) действие, несмотря на то, что кнопка для вторичного идет первой в порядке html.

Answer 1

Это должно решить проблему или, по крайней мере, дать вам несколько идей, как ее решить. Трудно написать решение, не видя остальной части кода.

Первая кнопка будет иметь тип button, вторая будет submit.

<form onSubmit={primaryAction}>
  <input type="text" />
  <button type="button" onClick={secondaryAction}>
    Second action
  </button>
  <button type="submit">Submit</button>
</form>

Answer 2

Чтобы сделать это таким образом, чтобы он работал в кросс-браузере, потребуется немного взлома, если вы не можете изменить порядок HTML (но вы можете изменить HTML).

Ниже Решение работает и без JavaScript.

Мы добавляем кнопку, которая одновременно скрыта и недоступна с клавиатуры. Эта кнопка идет первой в порядке DOM, поэтому будет действием по умолчанию в браузерах (большинство браузеров .... IE может работать и не тестировалось в Opera)

Для создания этой кнопки мы используем hidden-button класс, чтобы сделать кнопку невидимой. Мы также добавляем tabindex="-1", чтобы к нему нельзя было получить доступ с клавиатуры.

Эта кнопка будет иметь то же действие, что и ваше основное действие.

В приведенном ниже примере я добавил журналы консоли, чтобы вы может подтвердить, что работает

function hiddenBtn(){
    console.log("hidden button");
    return false;
}
function wrongBtn(){
    console.log("'wrong' button");
    return false;
}
function submitBtn(){
    console.log("submit button");
    return false;
}

.hidden-button{
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<form>
    <input/>
   <input/>

  <button class="hidden-button" onclick="return hiddenBtn()" tabindex="-1">Submit</button>

   <button onClick="return wrongBtn()">Second action</button>

   <button onclick="return submitBtn()">Submit</button>
</form>