¿Enviar un formulario en 'Enter' con jQuery?

Tengo un formulario de inicio de sesión estándar: un campo de texto de correo electrónico, un campo de contraseña y un botón de envío en un proyecto de AIR que utiliza HTML / jQuery. Cuando presiono Enter en el formulario, todo el contenido del formulario desaparece, pero el formulario no se envía. ¿Alguien sabe si esto es un problema de Webkit (Adobe AIR usa Webkit para HTML), o si he agrupado las cosas?

Lo intenté:

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

Pero eso no detuvo el comportamiento de limpieza ni envió el formulario. No hay ninguna acción asociada con el formulario, ¿podría ser ese el problema? ¿Puedo poner una función de JavaScript en la acción?

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

Vea esta respuesta de stackoverflow: event.preventDefault () vs. return false

Básicamente, "return false" es lo mismo que llamar e.preventDefaulty e.stopPropagation().

Además de devolver falso como Jason Cohen mencionó. Es posible que también deba evitar

e.preventDefault();

No sé si ayudará, pero puede intentar simular un clic en el botón Enviar, en lugar de enviar directamente el formulario. Tengo el siguiente código en producción, y funciona bien:

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

Nota: jQuery ('# submit'). Focus () hace que el botón se anime cuando se presiona enter.

Regrese falsepara evitar que continúe presionando la tecla.

¿Hay alguna razón para conectar y probar la tecla enter?

¿No podrías simplemente agregar un

<input type="submit" /> 

a su formulario y, naturalmente, ¿se debe enviar cuando se presiona enter? Incluso podría conectar la onsubmitacción del formulario y llamar a una función de validación desde allí si lo desea ...

Incluso podría usarlo onsubmitcomo prueba para ver si su formulario se está enviando, pero no funcionará si llama form.submit().

Aquí hay una manera de hacer esto como un complemento de JQuery (en caso de que quiera reutilizar la funcionalidad):

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

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

Ahora, si desea decorar un <input>elemento con este tipo de funcionalidad, es tan simple como esto:

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

También puede simplemente agregar onsubmit="return false"al código de formulario en la página para evitar el comportamiento predeterminado.

Luego, enganche ( .bindo .live) el submitevento del formulario a cualquier función con jQuery en el archivo javascript.

Aquí hay un código de muestra para ayudar:

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

Esto funciona a partir del 2011-04-13, con Firefox 4.0 y jQuery 1.4.3

Este es mi código:

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

También para mantener la accesibilidad, debe usar esto para determinar su código clave:

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

if (c == 13) ...

Solo agregando para una fácil implementación. Simplemente puede hacer un formulario y luego ocultar el botón Enviar:

Por ejemplo:

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

Yo uso ahora

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

Al principio agregué un controlador de eventos al botón de envío que produjo un error para mí.

Descubrí hoy que el evento de pulsación de tecla no se activa al presionar la tecla Intro, por lo que es posible que desee cambiar a keydown () o keyup () en su lugar.

Mi script de prueba:

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

La salida en la consola al escribir "A Enter B" en el teclado:

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

keydown (13)
enter
keyup (13)
enter

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

Verá en la segunda secuencia que falta la 'pulsación de tecla', pero se presionó / ​​soltó el código de registro de tecla y tecla de acceso '13'. Según la documentación de jQuery sobre la función 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.

Probado en IE11 y FF61 en Server 2012 R2

En 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>

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

Prueba esto:

var form = document.formname;

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