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

Question

У меня есть 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>

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

И только что изменили его на:

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

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

Answer 5

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

Answer 6

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

Answer 7

Я только что обернулся в Chrome, Firefox и IE10.

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

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