Después de dar enter sobre un input, no me permite tabular entre los inputs (textbox) en JS

publicado por: Anonymous

Activé esos eventos para poder presionar enter cuando estoy situado sobre algún input (caja texto) y el botón haga el evento onclick(); y otro evento para poder tabular entre los inputs, pero después de que doy Enter cuando estoy sobre un input, ya no puedo volver a tabular entre ellos, alguna solución?

    $("#Login").keyup(function (event) {

        if (event.keyCode == 13) { //Permite dar enter y ejecutar la función, cuando está posicionado sobre el txtLogin
            $("#btnLogin").click();
        }
    });
    $("#Contrasenia").keyup(function (event) {

        if (event.keyCode == 13 ) { //Permite dar enter y ejecutar la función, cuando está posicionado sobre el txtContrasenia
            $("#btnLogin").click();
        }
    });
    $("input").keydown(function (e) { //Permite tabular entre los inputs
        e.which == 9
    });

solución

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

_x000D_

_x000D_

$(document).ready( function() {_x000D_
// Function for button_x000D_
  myfoo = function(){_x000D_
    alert('Hello World');_x000D_
  };_x000D_
_x000D_
	$('body').keydown( function(e) {_x000D_
      switch(e.which){_x000D_
      	case 13:	// Enter, use of Function in button_x000D_
        	$(':focus')[0].name == 'txtLogin' ? $("#btnLogin").click() : ''_x000D_
        	$(':focus')[0].name == 'txtcontrasenia' ? $("#btnLogin").click() : ''_x000D_
        break;_x000D_
      	case 9:		// Tab, use of Alert_x000D_
        	$(':focus')[0].name == 'txtLogin' ? alert( 'Tab Input: ' + $(':focus')[0].name ) : ''_x000D_
        	$(':focus')[0].name == 'txtcontrasenia' ? alert( 'Tab Input: ' + $(':focus')[0].name ) : ''_x000D_
        break;_x000D_
        default:_x000D_
        break;_x000D_
      }_x000D_
    });	_x000D_
  } );

_x000D_

form { display: flex; flex-direction: column; align-items: center; }_x000D_
input { width: 50%; margin-bottom: 3em; }

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<body>_x000D_
  <form action="">_x000D_
    Login <input type="text" id="Login" name="txtLogin">_x000D_
    Contraseña <input type="text" id="Contrasenia" name="txtcontrasenia">_x000D_
    <input type="button" id="btnLogin" onclick="myfoo()" value="Boton Login">_x000D_
  </form>_x000D_
</body>

_x000D_

_x000D_

_x000D_

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.