Создание клавиши Enter для отправки HTML-формы вместо кнопки активации


81

У меня есть HTML-форма с одним submitвходом, но также с различными buttonэлементами. Когда пользователь нажимает клавишу ввода, я ожидал, что он действительно отправит форму, но вместо этого (по крайней мере, в Chrome 15) я обнаружил, что он запускает первый button(поскольку это происходит раньше в HTML, чем submitввод , Похоже).

Я знаю, что в целом вы не можете заставить браузеры отдавать предпочтение конкретному submitвводу, но я действительно думал, что они предпочтут ввод submitнад buttonэлементами. Есть ли небольшая настройка, которую я могу внести в HTML, чтобы заставить эту работу работать, или мне придется использовать какой-то подход Javascript?

Вот примерный макет HTML:

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>

Отметьте этот вопрос: stackoverflow.com/a/925387/1031900
Офир Фарчи

1
@OfirFarchy Я полагаю, что отличает этот вопрос то, что есть только ОДИН отправка, остальные - все кнопки.
Andygeers

Что ж, если вы не возражаете против использования JS и jQuery, проверьте мои ответы & david
Офир Фарчи

Ответы:


143

Вам не нужен JavaScript для выбора кнопки отправки или ввода по умолчанию. Вам просто нужно пометить его type="submit", а остальные кнопки пометить их type="button". В вашем примере:

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>

4
На самом деле это не работает должным образом в некоторых браузерах. Сегодня я столкнулся с этой проблемой, думая, что type = "submit" сделает ее значением по умолчанию, однако этого нет в Chrome или Safari.
Бен Дэвис

5
У меня работает в Chrome и Safari. Это должно быть что-то другое.
Хесус Каррера

15
Установка type = "button" на дополнительных кнопках И установка type = "submit" - вот что имеет значение.
Alex

21
Причина, по которой он не работает, если вы не установите его, type="button"заключается в том, что по умолчанию элементы кнопки type="submit". Таким образом, предпосылка вопроса о том, что была только одна кнопка отправки, на самом деле неверна.
Elezar

30

Вы можете использовать jQuery:

$(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});

14
Поскольку это принятый ответ: прокрутите вниз до очень простого решения, предназначенного только для HTML.
jlh 06

2
Решение HTML - правильный ответ. Браузер обрабатывает по умолчанию
Эдвард Ньюсом

Я знаю, что это старый ответ, но вам не нужно использовать это «тяжелое оборудование» для решения этой проблемы. Используйте решение только для HTML (ответ @ Jesús Carrera), теперь браузер обрабатывает это.
Martijn Luyckx

1
Хорошая особенность этого подхода - хотя да, он требует jQuery / JavaScript - это то, что он будет работать, даже если вам нужно иметь несколько кнопок отправки в вашей форме. В конкретном селекторе в этом примере не должно быть пробела после, button[type=submit]однако при условии, что вы пометили кнопку отправки по умолчанию с помощью defaultкласса css.
Кристофер Кинг

4

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

Укажите имя формы, например, yourFormNameтогда вы сможете отправить форму, не обращая внимания на форму.

document.onkeypress = keyPress;

function keyPress(e){
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3){
   //  myFunc1();
   document.yourFormName.submit();
  }
}

если в форме больше кнопок отправки, это поможет: <input type = "submit" id = "submit" value = "ok" /> document.getElementById ("submit"). click ();
Muflix

Это тупой способ обойти поведение по умолчанию в HTML. См. Ответ выше, почему.
alttag

4

Я просто столкнулся с проблемой с этим. Моя была неудачной из-за смены на inputa, buttonи у меня был плохо написанный />терминатор тега:

Итак, у меня было:

<button name="submit_login" type="submit" class="login" />Login</button>

И только что внесли в него поправки:

<button name="submit_login" type="submit" class="login">Login</button>

Теперь работает как шарм, всегда раздражающие мелочи ... HTH


4
$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});

2

Учитывая, что есть только одна (или с этим решением, возможно, даже не одна) кнопка отправки, вот решение на основе jQuery, которое будет работать для нескольких форм на одной странице ...

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>

1

Я просто попробовал это как в Chrome, так и в Firefox и IE10.

Как упоминалось выше - убедитесь, что вы отметили type = "button", "reset", "submit" и т. Д., Чтобы убедиться, что он правильно каскадируется и выбирает правильную кнопку.

Возможно также, чтобы все они имели одинаковую форму (т.е. все, что работало для меня)

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.