Cambiar Entrar desde el envío a la pestaña?

Question

A los usuarios no les gusta el hecho de que la tecla Enter envíe la página. Por lo tanto, tengo la tarea de evitar la presentación y cambiar la tecla Intro a una pestaña para el siguiente campo.

He intentado muchos fragmentos de javascript encontrados en la red, pero ninguno ha funcionado hasta ahora. El único que incluso ha estado cerca de tener un efecto fue e.preventDefault() de la API jQuery, que detiene el envío, pero nada de lo que he probado emula el comportamiento de la pestaña.

e.returnValue = false; 
e.cancel = true; 

La página aún se envía con lo anterior en el controlador de eventos de selección de teclas. Mismo efecto con return false en el controlador de eventos keydown. El controlador está disparando, probado poniendo un punto de interrupción en él con firebug.

Esto necesita funcionar tanto con IE como con Firefox.

No diga "no haga esto".
1) Ya estoy convencido de que no debería hacerlo, pero no es una opción que es mía, por lo que la discusión es muda.
2) Sería una respuesta a la pregunta "¿Debo hacer esto?", Que no es la pregunta que estoy formulando.

Answer 1

Esto sólo se siente repulsivo, pero se puede usar event.preventDefault como usted ha mencionado y luego llamar focus() en la siguiente entrada más cercana:

es un ejemplo sencillo aquí:

$("input").bind("keydown", function(event) { 
    if (event.which === 13) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     $(this).next("input").focus(); 
    } 
}); 

Ejemplo: http://jsfiddle.net/andrewwhitaker/Txg65/

Actualización: Si tiene elementos entre sus entradas, usar el next() no funcionará. En su lugar, utilice nextAll():

$("input").bind("keydown", function(event) { 
    if (event.which === 13) { 
     event.stopPropagation(); 
     event.preventDefault(); 
     $(this).nextAll("input").eq(0).focus(); 
    } 
}); 

http://jsfiddle.net/andrewwhitaker/GRtQY/

Answer 2

$("input").bind("keydown", function(event) { 

    if (event.which === 13 && this.type !== 'submit') { 
     event.preventDefault(); 
     $(this).next("input").focus(); 
    } 
}); 

Answer 3

Sobre la base de este post: http://forum.jquery.com/topic/how-to-find-next-node-in-focus-order

me ocurrió esto. Finalmente decidí no usar focasables y, en su lugar, utilizar la entrada para obtener el efecto que quería. El .not es para evitar que los botones de imagen y botones de envío se vean afectados, por lo que todavía tienen la acción predeterminada de enviar al ingresar cuando tienen foco.

$(document).ready(function() { 
var focusables = $(":input").not('[type="image"]').not('[type="submit"]'); 

    focusables.keydown(function(e) { 
    if (e.keyCode == 13) { 
     e.preventDefault(); 
     var current = focusables.index(this), 
       next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0); 
     next.focus(); 
    } 
    }); 
});