Создание ключа ввода в форме HTML-сообщения вместо активации кнопки

У меня есть HTML-форма с единственным входом submit, но также и с различными элементами button. Когда пользователь нажимает клавишу 'enter', я ожидаю, что она действительно представит форму, но вместо этого (в пределах как минимум 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>

Ответ 1

Вы можете использовать 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;
        }
    });
});

Ответ 2

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

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

Ответ 3

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

Укажите имя формы, например, 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();
  }
}

Ответ 4

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

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

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

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

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

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

Ответ 5

Учитывая, что существует только одна (или с этим решением потенциально не одна) кнопка отправки, вот решение на основе 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>

Ответ 6

Я просто дал это завихрение как в Chrome, так и в Firefox и IE10.

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

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

Ответ 7

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