javascript - example - ¿Presentar un formulario en ''Enter'' con jQuery?

remove html jquery

Question

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 Entrar en el formulario, el contenido de todo el 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 me he metido en problemas?

Lo intenté:

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

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

Answer 1

¿Hay alguna razón por la que tenga que enganchar y probar la tecla enter?

¿No podrías simplemente agregar un

<input type="submit" /> 

a su formulario y enviarlo de forma natural cuando se presiona entrar? Incluso podría enganchar la acción onsubmit del onsubmit y llamar a una función de validación desde allí si quisiera ...

Incluso podría usar el onsubmit como prueba para ver si su formulario se está form.submit() , pero no funcionará si llama a form.submit() .

Answer 2

Además de devolver el falso como mencionó Jason Cohen. Es posible que tengas que prevenir también

e.preventDefault();

Answer 3

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 quieres decorar con este tipo de funcionalidad es tan simple como esto:

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

Answer 4

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

Mi guión 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)

Se ve en la segunda secuencia que falta la ''pulsación de tecla'', pero el código de registro de pulsación de tecla ''13'' y el botón ''13'' pulsado / liberado 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

Answer 5

Devuelva false para evitar que la pulsación continúe.

Answer 6

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

Answer 7

Este es mi código:

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

Answer 8

No sé si será de ayuda, pero puede intentar simular el clic de un botón de envío, en lugar de enviar el formulario directamente. 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.

Answer 9

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

Answer 10

Solo añadiendo para una fácil implementación. Simplemente puede hacer un formulario y luego hacer que el botón de envío esté oculto:

Por ejemplo:

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

Answer 11

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

Answer 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 ( .bind o .live ) el evento de submit del submit a cualquier función con jQuery en el archivo javascript.

Aquí hay un código de ejemplo 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

Answer 13

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

Answer 14

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

NOTA: aceptó la respuesta de bendewey, pero es incorrecta con su descripción de e.preventDefault (). Echa un vistazo a esta respuesta de : event.preventDefault () vs. return false

Esencialmente, "devolver falso" es lo mismo que llamar a e.preventDefault y e.stopPropagation() .