Enviando um formulário em 'Enter' com jQuery?

Eu tenho um formulário de login padrão - um campo de texto de email, um campo de senha e um botão de envio em um projeto do AIR que usa HTML / jQuery. Quando pressiono Enter no formulário, o conteúdo inteiro desaparece, mas o formulário não é enviado. Alguém sabe se esse é um problema do Webkit (o Adobe AIR usa o Webkit para HTML) ou se eu estraguei tudo?

Eu tentei:

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

Mas isso não interrompeu o comportamento de limpeza ou enviou o formulário. Não há nenhuma ação associada ao formulário - esse poderia ser o problema? Posso colocar uma função javascript na ação?

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

Verifique esta resposta do stackoverflow: event.preventDefault () vs. return false

Essencialmente, "retornar falso" é o mesmo que chamar e.preventDefaulte e.stopPropagation().

Além de retornar false, como Jason Cohen mencionou. Pode ser necessário também impedir o padrão

e.preventDefault();

Não sei se isso ajudará, mas você pode tentar simular um clique no botão enviar, em vez de enviar diretamente o formulário. Eu tenho o seguinte código em produção e funciona bem:

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

Nota: jQuery ('# submit'). Focus () anima o botão quando pressionar enter.

Retorne falsepara impedir que o pressionamento de tecla continue.

Existe algum motivo para você conectar e testar a tecla Enter?

Você não poderia simplesmente adicionar um

<input type="submit" /> 

ao seu formulário e ele deve ser enviado naturalmente quando a tecla enter for pressionada? Você ainda pode ligar a onsubmitação do formulário e chamar uma função de validação a partir daí, se quiser ...

Você pode até usar o onsubmitcomo um teste para ver se seu formulário está sendo enviado, mas não funcionará se você ligar form.submit().

Aqui está uma maneira de fazer isso como um plugin JQuery (caso você queira reutilizar a funcionalidade):

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

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

Agora, se você deseja decorar um <input>elemento com esse tipo de funcionalidade, é simples assim:

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

Você também pode simplesmente adicionar onsubmit="return false" o código do formulário na página para impedir o comportamento padrão.

Em seguida, conecte ( .bindou .live) o formuláriosubmit evento a qualquer função com jQuery no arquivo javascript.

Aqui está um código de exemplo para ajudar:

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()
    });
});

Isso funciona desde 13/04/2011, com o Firefox 4.0 e o jQuery 1.4.3

Este é o meu código:

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

Também para manter a acessibilidade, você deve usar isso para determinar seu código de chave:

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

if (c == 13) ...

Apenas adicionando para fácil implementação. Você pode simplesmente criar um formulário e ocultar o botão enviar:

Por exemplo:

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

Eu uso agora

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

Inicialmente, adicionei um manipulador de eventos ao botão de envio que produziu um erro para mim.

Descobri hoje que o evento de pressionamento de tecla não é acionado ao pressionar a tecla Enter; portanto, convém alternar para keydown () ou keyup ().

Meu script de teste:

        $('.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 saída no console ao digitar "A Enter B" no teclado:

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

keydown (13)
enter
keyup (13)
enter

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

Você vê na segunda sequência o 'pressionamento de tecla' está ausente, mas o código de registro de teclas e de teclas '13' foi pressionado / liberado. Conforme a documentação do jQuery na função keypress () :

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.

Testado no IE11 e FF61 no Server 2012 R2

Nos códigos 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>

Nos códigos 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
        }
    });
}

Tente o seguinte:

var form = document.formname;

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