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

Question

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

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

613 7

jQuery html forms

7 ответов:

Comments

Ничего не найдено.

Ofir Farchy · Accepted Answer · 2011-11-28 12:33:00

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

Jesús Carrera · Accepted Answer · 2013-05-09 16:22:03

вам не нужно JavaScript, чтобы выбрать кнопку отправки по умолчанию или ввода. Вам просто нужно отметить его с type="submit", а остальные кнопки помечают их type="button". В вашем примере:
<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>

david · Accepted Answer · 2017-09-21 16:02:09

попробуйте это, если клавиша enter была нажата, вы можете захватить ее так, например, я разработал ответ на днях 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();
  }
}

Mike Wells · Accepted Answer · 2017-09-21 16:03:05

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

так у меня было:
<button name="submit_login" type="submit" class="login" />Login</button>
и только что исправили его:
<button name="submit_login" type="submit" class="login">Login</button>
теперь работает как шарм, всегда раздражающих мелочей... ХТ

Darren · Accepted Answer · 2012-04-26 04:24:32

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

Flanamacca · Accepted Answer · 2013-06-22 06:24:32

Я просто дал этому вихрь как в Chrome, так и в Firefox и IE10.

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

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

samehanwar · Accepted Answer · 2017-09-21 16:04:14

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