0

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
    });
1
  • Podrías proporcionar un fragmento de tu código (html, js) que pueda ser probado para así verificar que puede estar ocurriendo?
    – Yikarus
    Commented el 16 may. 2017 a las 18:12

1 respuesta 1

-1

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.

1
  • Muchísimas gracias, funcionó perfecto, cuando daba enter y estaba sobre un textbox se ejecutaba la función del botón, pero como que se perdía el focus, porque aunque me posisionara de forma manual sobre un textbox, ya no funcionaba la tabulación, disculpa que de términos así de textbox, soy nuevo en la parte web, y éstos tipos de controles no los he utilizado mucho, es en razor donde se crean los controles Commented el 17 may. 2017 a las 15:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.