¿Cómo capturar la tecla Intro presionada en las páginas que contienen varias formas?

Question

He heredado una aplicación web en la que se ha desactivado la capacidad habitual de presionar regresar en cualquiera de los campos de entrada por la buena razón de que la página contiene varios formularios y la aplicación no podría determinar (o, por lo tanto, me dicen) qué forma de acción. La aplicación ha sido diseñada para que no haya botones de envío (como en input type = "submit") y, en cambio, los diseñadores han optado por el manejo onclick. Aquí hay dos botones que se definen en una de las páginas, incluidos para la ilustración

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit(); />" 

<input type="button" class="button-click-grey" value="Find Link Partners" 
    onclick="raiseEvent('SubmitForm','',this);" style="cursor:pointer;" /> 

Pero lo que realmente quieren ser capaces de permitir a los usuarios presionan regreso si lo desean, por ejemplo, si acaban de escribir en un campo asociado con el INICIO DE SESIÓN, entonces detecte eso y actúe onclick = "submit();"

Quizás exista una solución con jQuery.

Answer 1

Crucemos los dedos esto funcionará

$(document).ready(function() { 
    var focussed_form; 
    $('input').focus(focus_form); 
    $('input').blur(unfocus_form); 
    $('textarea').focus(focus_form); 
    $('textarea').blur(unfocus_form); 
    $('select').focus(focus_form); 
    $('select').blur(unfocus_form); 

    $(document).keypress(function(e) { 
    if(e.keyCode == 13) 
    { 
     $(focussed_form).trigger('submit'); 
    } 
    }); 

    function focus_form(){ 
    focussed_form = $(this).closest('form'); 
    } 

    function unfocus_form(){ 
    focussed_form = NULL; 
    } 

}); 

Answer 2

no creo que necesita jQuery o Javascript para esto. De hecho, puede detectar en qué formulario ingresa un usuario, o incluso en qué botón de enviar se envía (en caso de que haya más de un botón de envío por formulario).

Aquí está el código que utilizaría:

<form action="http://foo.com/uri" method="POST"> 
    <input type="submit" name="action1a" value="add" /> 
    <input type="submit" name="action1b" value="delete" /> 
</form> 
<form action="http://foo.com/uri" method="POST"> 
    <input type="submit" name="action2a" value="add" /> 
    <input type="submit" name="action2b" value="delete" /> 
    <input type="submit" name="action2c" value="someOtherAction" /> 
</form> 

Luego de la secuencia de comandos de procesamiento de formularios, sólo tendría que comprobar el nombre del botón de enviar, por ejemplo:

if (isset($_POST['action1a'])) ... // PHP syntax 

alternativa, puede usar imágenes como botones de envío, luego puede usar el mismo nombre para todos los botones de envío y simplemente verificar sus valores; también puede hacer esto con los botones de envío normales si cada botón tiene un único atributo value.

---

Editar: un método más es combinar POST y obtener los valores, es decir:

<form action="http://foo.com/uri?form=1" method="POST"> 
    <input type="submit" name="action" value="add" /> 
    <input type="submit" name="action" value="delete" /> 
</form> 
<form action="http://foo.com/uri?form=2" method="POST"> 
    <input type="submit" name="action" value="add" /> 
    <input type="submit" name="action" value="delete" /> 
</form> 

Answer 3

página contiene múltiples formas, y la aplicación no sería capaz de determinar (o, por lo que estoy dicho) que forma a la acción.

Cuando se presiona entrar en una entrada de control del navegador busca el primer botón presentar en esa forma y simula un clic sobre ella. En el caso de varios botones, se presionará el primero en el teclado enter (esto no está escrito en piedra y los navegadores pueden desviarse de esto).

Si tiene dos formularios, el que recibió una pulsación de tecla tendrá es primer botón de envío presionado. Por lo tanto, realmente no necesitas ningún manejo especial de esto. Solo tienes que dejar de estar en el camino.

Se puede simular esto en código, en un formulario:

$('form').bind('keypress', function(e){ 
    if (e.keyCode == 13) { 
    $(this).find('input[type=submit]:first').click(); 
    } 
}); 

o ventana (para una demostración de lo que está ocurriendo más o menos):

$(window).bind('keypress', function(e){ 
    if ($(e.originalTarget).is(':input') && e.keyCode == 13) { 
    $( e.originalTarget) 
     .closest('form') 
     .find('input[type=submit]:first') 
      .click(); 
    } 
}); 

asumiendo por supuesto que .preventDefault() no ha sido llamado en el evento.

En pocas palabras: si tienes el evento, puedes adivinar de qué elemento proviene y, por lo tanto, a qué forma pertenece. Incluso en este caso:

<input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();"> 

Aquí submit() es una función global, pero cuando se le llama, su contexto (this) será el elemento y se puede hacer submit(e){ this.form.submit(); }.

La aplicación ha sido diseñada de modo que no son botones de envío (como en el tipo de entrada = "submit") y, en cambio, los diseñadores han ido para el manejo onclick.

Esto me parece que el diseñador no comprende por completo los eventos DOM/forma y va a la vuelta de la esquina del problema. Otra razón probable podría ser que el programa es antiguo y se diseñó cuando estas cosas no eran tan estables o estaban debidamente documentadas, como lo son hoy.

Reemplazar esta:

<form action="/login/" method="POST"> 
    [...] 
    <input type="button" value="LOGIN" name="btnLoginOk" onclick="submit();"> 
</form> 

Con esta:

<form action="/login/" method="POST"> 
    [...] 
    <input type="submit" value="LOGIN" name="btnLoginOk"> 
</form> 

Luego agregar un controlador clave de todas formas que lo necesitan, que detecta y suprime entrar si se cumple alguna condición (para las formas que realmente quiere desactivar esto).

// for all forms that POST that have 2+ submit buttons 
$('form[method=post]:has(:submit:eq(1))').bind('keydown', function(e){ 
    // if target is an enter key, input element, and not a button 
    if (e.keyCode == 13 && e.target.tagName == 'INPUT' && 
     !/^(button|reset|submit)$/i.test(e.target.type)) { 
    return false; // kill event 
    } 
}); 

O mejor aún: Utilice una biblioteca de formularios de validación (o plugin de jQuery) que sabe cómo hacer esto para usted.

Answer 4

Puede enlazar caso pulse la tecla para la tecla Enter en jQuery:

$("form").bind("keypress", function(e) { 
    if (e.keyCode == 13) { 
     your_custom_submit_function(); 
     return false; // ignore default event 
    } 
});