Creo que te refieres a que una vez se pulse Enter no se pierda el foco en los inputs y sigas pudiendo tabular saltando entre otros inputs del formulario, quedaría algo así:
$(document).ready( function() {
// Function for button
myfoo = function(){
alert('Hello World');
};
$('body').keydown( function(e) {
switch(e.which){
case 13: // Enter, use of Function in button
$(':focus')[0].name == 'txtLogin' ? $("#btnLogin").click() : ''
$(':focus')[0].name == 'txtcontrasenia' ? $("#btnLogin").click() : ''
break;
case 9: // Tab, use of Alert
$(':focus')[0].name == 'txtLogin' ? alert( 'Tab Input: ' + $(':focus')[0].name ) : ''
$(':focus')[0].name == 'txtcontrasenia' ? alert( 'Tab Input: ' + $(':focus')[0].name ) : ''
break;
default:
break;
}
});
} );
form { display: flex; flex-direction: column; align-items: center; }
input { width: 50%; margin-bottom: 3em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form action="">
Login <input type="text" id="Login" name="txtLogin">
Contraseña <input type="text" id="Contrasenia" name="txtcontrasenia">
<input type="button" id="btnLogin" onclick="myfoo()" value="Boton Login">
</form>
</body>
Todo sin problemas, el foco cuando está en los input
y se pulsa Enter, llama al botón y su función, pero no pierde la selección del input
en el que está y se puede seguir tabulando a partir de ahí.
La tabulación se produce en cascada hacia abajo por todos los elementos de la página, por lo que si buscas que la tabulación sea cerrada, que salte entre inputs tipo text
y vuelva a empezar una vez acabe con el último, habría que hacerlo aparte como parte del script en el caso de la tecla con el code 9 ( Tabulación ).
Si apuntas al cuerpo de la página con un solo evento keydown
, solo con un switch
o if/else/elseif
puedes manejar mejor los eventos que quieres que ocurran al pulsar una tecla.
Nota: He usado el operador ternario en los case
.