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

427

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?

be hollenbeck
fonte
3
Você realmente tem um atributo class = "input" no seu <input ...? Parece que deve ser $ ('input'). Pressionamento de tecla ...
NexusRex
As classes são geradas programaticamente por um CMS. Fora isso, no entanto, defini-lo como $ ('input') afetaria todas as entradas da página, independentemente de eu querer ou não o comportamento. Desculpe ofender suas sensibilidades.
ser Hollenbeck
15
Sensibilidades não ofendidas nem um pouco. Apenas pensei que poderia ter sido um descuido que levou ao problema. Continue.
NexusRex
1
FYI: Sua resposta aceita não é totalmente precisa. Consulte a minha resposta abaixo.
NoBrainer 24/09/12

Respostas:

399
$('.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().

Acéfalo
fonte
3
Observe que eles não são os mesmos. O IE8 não possui e.preventDefault. Para o IE8, use event.returnValue = false;
27413 mbokil
8
@mbokil Exceto que, ao usar o jQuery, é o mesmo no IE8. e IE7. E IE6.
22714 Kevin Kevin B
Se você deseja digitar primeiro nos campos de entrada, insira "return false;" dentro da instrução if.
Juni Brosas
173

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

e.preventDefault();
Bendewey
fonte
13
como disse @NoBrainer, isso é errado: return falseem um evento gerido por jQuery automaticamente chamar e.preventDefault ()
Riccardo Galli
83

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.

karim79
fonte
2
Funciona muito bem, mas eu tive que adicionar "return false;" para impedir o envio duplo de formulários.
usar o seguinte código
Trabalhando | Veja MUITOS resultados como este falando sobre trigger, sendkey, etc, doh, blah ..., mas esse é o único que funciona para mim e realmente envie um clique em um botão. Não enviar (). Portanto, o truque foi o foco (). Clique () funções em segurança. OBRIGADO.
M3nda
Obras, mas eu tive que colocar esse código abaixo: $ (document) (função .ready () {...
Shasi kanth
61

Retorne falsepara impedir que o pressionamento de tecla continue.

Jason Cohen
fonte
30

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().

Zack The Human
fonte
1
Concordo plenamente. Minha preferência seria sempre usar a funcionalidade nativa do navegador (entradas de type = submeter respondem nativamente a um pressionamento de tecla ENTER) em vez de adicionar scripts de mais kludged up ..
Aaron
1
O problema é que, se você estiver fazendo coisas de ajax e não houver uma postagem real no servidor, mas desejar que a interface do usuário se comporte conforme o usuário espera?
Devlord # 25/12 /
Na verdade ... eu tinha esquecido a return false;coisa toda .
Devlord #
14

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
    } );
Bvaughn
fonte
12

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

GERV
fonte
Não funciona no Chrome. Enviará de qualquer maneira.
Marcelo Agimóvel
5

Este é o meu código:

  $("#txtMessage").on( "keypress", function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.preventDefault();
        $("#frSendMessage").submit();
    }
    });
Hoàng Vũ Tgtt
fonte
4

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) ...
Logan Serman
fonte
3

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>
Joem Maranan
fonte
@cebirci e qual versão é o seu chrome? Eu testei de laptops para pc e meu código simplesmente funciona. Tente baixar o cromo mais recente antes de anotá-lo na minha resposta.
Joem Maranan
2

Eu uso agora

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

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

faebser
fonte
1

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

Piemol
fonte
0

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
        }
    });
}
mghhgm
fonte
1
Não poste respostas idênticas para várias perguntas. Poste uma boa resposta e vote / sinalize para fechar as outras perguntas como duplicadas. Se a pergunta não for duplicada, adapte suas respostas à pergunta.
Paul Roub
@PaulRoub minha resposta tem alguma diferença com outra.
Mghhgm #
Qual é a diferença desta resposta para isto ou para isto ?
Paul Roub
@PaulRoub Eu tenho esse problema e primeiro pesquise no google por isso. Nessas páginas, fale sobre esse problema, mas não é simples. Quando encontro a melhor resposta, decidi compartilhar isso nas páginas Que falam sobre para ajudar os usuários a pesquisar isso, veja minha resposta em algumas páginas similares de fluxo de pilha.
Mghhgm #
1
esta resposta não está relacionada com a questão em tudo
Zoltán Süle
-4

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();
        }
    })
}
nigitza
fonte
9
Esta é a mistura de jquery com baunilha javascript de uma maneira desconfortável, e inclui um elenco realmente estranho, que só confunde as coisas
moopet