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

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

пробовал:

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

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

14 ответов


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

Примечание: Вы приняли ответ бендевея, но он неверен с его описанием e.preventDefault (). Проверьте этот ответ stackoverflow: событие.preventDefault () против return false

По сути, "return false" - это то же самое, что и вызов e.preventDefault и e.stopPropagation().


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

e.preventDefault();

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

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

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


Return false чтобы предотвратить нажатие клавиши от продолжения.


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

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

<input type="submit" /> 

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

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


вот способ сделать это как плагин 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
    } );

вы также можете просто добавить 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


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

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

if (c == 13) ...

Это мой код:

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

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

например:

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

Я сейчас использую

$("form").submit(function(event)

сначала я добавил eventhandler к кнопке отправки, которая вызвала ошибку для меня.


в HTML-код:

<form action="POST" onsubmit="ajax_submit();return false;">
    <b>First Name:</b> <input type="text" name="firstname" id="firstname">
    <br>
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname">
    <br>
    <input type="submit" name="send" onclick="ajax_submit();">
</form>

в кодах Js:

function ajax_submit()
{
    $.ajax({
        url: "submit.php",
        type: "POST",
        data: {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        },
        dataType: "JSON",
        success: function (jsonStr) {
            // another codes when result is success
        }
    });
}

я узнал, что сегодня событие нажатия клавиши не запускается при нажатии клавиши Enter, поэтому вы можете переключиться на keydown() или keyup ().

мой тестовый скрипт:

        $('.module input').keydown(function (e) {
            var keyCode = e.which;
            console.log("keydown ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keyup(function (e) {
            var keyCode = e.which;
            console.log("keyup ("+keyCode+")")
            if (keyCode == 13) {
                console.log("enter");
                return false;
            }
        });
        $('.module input').keypress(function (e) {
            var keyCode = e.which;
            console.log("keypress ("+keyCode+")");
            if (keyCode == 13) {
                console.log("Enter");
                return false;
            }
        });

вывод в консоли при вводе "A Enter B" на клавиатуре:

keydown (65)
keypress (97)
keyup (65)

keydown (13)
enter
keyup (13)
enter

keydown (66)
keypress (98)
keyup (66)

вы видите во второй последовательности "нажатие клавиши" отсутствует, но keydown и keyup регистрируют код " 13 " Как нажатый/освобожденный. Согласно документация jQuery по функции нажатие клавиши ():

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

протестировано на IE11 и FF61 на сервере 2012 R2


попробуйте это:

var form = document.formname;

if($(form).length > 0)
{
    $(form).keypress(function (e){
        code = e.keyCode ? e.keyCode : e.which;
        if(code.toString() == 13) 
        {
             formsubmit();
        }
    })
}