¿Enviar un formulario en 'Enter' con jQuery?


427

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?


3
¿Realmente tienes un atributo class = "input" en tu <input ...? Parece que debería ser $ ('input').
Pulsación de

Las clases son generadas programáticamente por un CMS. Aparte de eso, sin embargo, su alcance a $ ('input') afectaría cada entrada en la página, independientemente de si quería el comportamiento o no. Lo siento, ofende tu sensibilidad.
be hollenbeck

15
Sensibilidades no ofendidas en lo más mínimo. Solo pensé que podría haber sido un descuido que condujo al problema. Continua.
NexusRex

1
FYI: Su respuesta aceptada no es del todo precisa. Consulte mi respuesta a continuación.
NoBrainer

Respuestas:


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


3
Tenga en cuenta que no son lo mismo. IE8 no tiene e.preventDefault. Para IE8, use event.returnValue = false;
mbokil

8
@mbokil Excepto que cuando se usa jQuery, es lo mismo en IE8. e IE7. Y IE6.
Kevin B

Si desea escribir primero en los campos de entrada, ponga "return false;" dentro de la declaración if.
Juni Brosas

173

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

e.preventDefault();

13
como dijo @NoBrainer, esto está mal: return falseen un evento administrado por jQuery, llame automáticamente a e.preventDefault ()
Riccardo Galli

83

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.


2
Funciona muy bien pero tuve que agregar "return false"; para evitar la doble presentación de formularios.
código90

Trabajando | Vea MUCHOS resultados como este hablando sobre trigger, sendkey, etc., doh, blah ..., pero eso es lo único que me funciona y realmente envía un clic en un botón. No enviar (). Entonces, el truco era las funciones focus (). Click () en secuencia. GRACIAS.
m3nda

Funciona, pero tuve que poner este código en: $ (document) .ready (function () {...
shasi kanth


30

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


1
Totalmente de acuerdo. Mi preferencia siempre sería utilizar la funcionalidad nativa del navegador (las entradas del tipo = someten responden de forma nativa a una pulsación de tecla enter) en lugar de añadir guiones kludged más arriba ..
Aaron

1
El problema es, ¿qué sucede si está haciendo cosas de ajax y no hay una devolución real al servidor, pero desea que la IU se comporte como el usuario espera?
devlord

De hecho ... había pasado por alto todo el return false;asunto.
devlord

14

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

12

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


No funciona en Chrome. Se presentará de todos modos.
Marcelo Agimóvel

5

Este es mi código:

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

4

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

3

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>

@cebirci y ¿cuál es tu versión de Chrome? Probé desde computadoras portátiles a PC y mi código simplemente funciona. Intente descargar el nuevo Chrome antes de marcar mi respuesta.
Joem Maranan

2

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í.


1

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


0

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

1
No publiques respuestas idénticas a múltiples preguntas. Publique una buena respuesta, luego vote / marque para cerrar las otras preguntas como duplicados. Si la pregunta no es un duplicado, adapte sus respuestas a la pregunta.
Paul Roub

@PaulRoub mi respuesta tiene alguna diferencia con otra.
mghhgm

¿Cómo es esta respuesta diferente de esto o de esto ?
Paul Roub

@PaulRoub Tengo este problema y primero busca en Google esto. En esas páginas, habla sobre este problema pero no es simple. Cuando encuentro la mejor respuesta, decidí compartir esto en que las páginas hablan para ayudar a los usuarios cuando buscan esto, vea mi respuesta en algunas páginas similares de stackoverflow.
mghhgm

1
esta respuesta no está relacionada con la pregunta en absoluto
Zoltán Süle

-4

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

99
Esta es la mezcla de jQuery con vainilla Javascript de una manera incómoda, e incluye un elenco realmente extraño que acaba confunde las cosas
moopet
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.