Отправка формы на «Enter» с помощью jQuery?

Question

У меня есть стандартная форма входа в систему - текстовое поле электронной почты, поле пароля и кнопка отправки в проекте AIR, использующем HTML / jQuery. Когда я нажимаю Enter в форме, все содержимое формы исчезает, но форма не отправляется. Кто-нибудь знает, если это проблема Webkit (Adobe AIR использует Webkit для HTML), или я что-то напутал?

Я пытался:

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
  }
});

Но это ни остановило очистку, ни отправило форму. С формой не связано никаких действий - может ли это быть проблемой? Могу ли я добавить в действие функцию javascript?

Answer 1

$('.input').keypress(function (e) {
  if (e.which == 13) {
    $('form#login').submit();
    return false;    //<---- Add this line
  }
});

ПРИМЕЧАНИЕ. Вы приняли ответ Бендевея, но он неверен с описанием e.preventDefault (). Посмотрите на этот ответ: event.preventDefault () против возврата false

По сути, «возврат ложь» - это то же самое, что и вызовы e.preventDefault и e.stopPropagation().

Answer 2

В дополнение к возвращению false, как упоминал Джейсон Коэн. Возможно, вам также придется предотвратить дефолт

e.preventDefault();

Answer 3

Не знаю, поможет ли это, но вы можете попытаться смоделировать нажатие кнопки «Отправить» вместо прямой отправки формы. У меня есть следующий код в производстве, и он отлично работает:

    $('.input').keypress(function(e) {
        if(e.which == 13) {
            jQuery(this).blur();
            jQuery('#submit').focus().click();
        }
    });

Примечание: jQuery ('# submit'). Focus () делает кнопку анимированной при нажатии клавиши ввода.

Answer 4

Возврат false для предотвращения продолжения нажатия клавиши.

Answer 5

Есть ли какая-то причина, по которой вам нужно подключиться и проверить ключ ввода?

Не могли бы вы просто добавить

<input type="submit" /> 

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

Вы можете даже использовать onsubmit в качестве теста, чтобы увидеть, отправляется ли ваша форма, но она не будет работать, если вы позвоните form.submit().

Answer 6

Вот способ сделать это как плагин JQuery (на случай, если вы захотите повторно использовать функциональность):

$.fn.onEnterKey =
    function( closure ) {
        $(this).keypress(
            function( event ) {
                var code = event.keyCode ? event.keyCode : event.which;

                if (code == 13) {
                    closure();
                    return false;
                }
            } );
    }

Теперь, если вы хотите украсить этот тип функциональности, это так просто:

$('#your-input-id').onEnterKey(
    function() {
        // Do stuff here
    } );

Answer 7

Вы также можете просто добавить onsubmit="return false" к коду формы на странице, чтобы предотвратить поведение по умолчанию.

Затем подключите (.bind или .live) событие формы submit к любой функции с jQuery в файле javascript.

Вот пример кода, чтобы помочь:

HTML

<form id="search_form" onsubmit="return false">
   <input type="text" id="search_field"/>
   <input type="button" id="search_btn" value="SEARCH"/>
</form>

Javascript + JQuery

$(document).ready(function() {

    $('#search_form').live("submit", function() {
        any_function()
    });
});

Это работает с 2011-04-13, с Firefox 4.0 и jQuery 1.4.3

Answer 8

Это мой код:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });

Answer 9

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

c = e.which ? e.which : e.keyCode;

if (c == 13) ...

Answer 10

Просто добавление для легкой реализации. Вы можете просто создать форму, а затем скрыть кнопку отправки:

Например:

<form action="submit.php" method="post">
Name : <input type="text" name="test">
<input type="submit" style="display: none;">
</form>