[SOLUCIONADO] Enter por tab

pmfras · #1 (**permalink**) 07/11/2014, 16:26

Existe algun codigo que me permita transformar el tab por el enter???

Alexis88 · #2 (**permalink**) 07/11/2014, 17:04

Claro:

Código Javascript:

Ver originalvar inputs = $("form :text"),
    length = inputs.length,
    i = 0;
 
inputs.on("keypress", function(event){
    var code = event.keyCode || event.which;    
    if (code == 13){
        event.preventDefault();
        i = i == length - 1 ? 0 : ++i;
        inputs[i].focus();
    }
});

Tomo a todos los <input type = "text" /> del formulario y el total que estos representan, además, declaro una variable que usaré como contador e inicializaré en cero. Cuando pulsemos una tecla teniendo el enfoque alguna de las cajas de texto, tomo el código de la tecla pulsada y la evalúo; si es igual a 13 (el código de la tecla ENTER), evito el comportamiento natural del evento que, para este caso, enviaría los datos del formulario a procesarse, actualizo el valor del contador y le doy el enfoque a la caja de texto equivalente al nuevo valor del contador.

Saludos

pmfras · #3 (**permalink**) 07/11/2014, 18:14

gracias lo pruebo y te aviso

pmfras · #4 (**permalink**) 10/11/2014, 14:27

No me anda!!!!!, te paso los dos archivos simplicadisimos:

*********************** 4.php

<html>
<head>
<title>Prueba</title>
<meta charset="utf-8">
</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="5.js"></script>

<body>
<form method="post" action="">
<input type='text'>
<input type='text'>
<input type='text'>
</form>
</body>
</html>

************************** 5.js
var inputs = $("form :text"),
length = inputs.length,
i = 0;

$(document).ready(function()
{
console.log(length);
inputs.on("keypress", function(event)
{
var code = event.keyCode || event.which;
if (code == 13)
{
console.log('aaaaaaaaaa');
event.preventDefault();
i = i == length - 1 ? 0 : ++i;
inputs[i].focus();
}
});
})

Discupla si hay algun horror, soy muy nuevo en esto y tal vez hay algun horror.
Saludos y espero atento tu respuesta.

Alexis88 · #5 (**permalink**) 10/11/2014, 16:24

Coloca esto:

Código HTML:

Ver original<script type="text/javascript" src="5.js"></script>

Justo antes de esto:

Código HTML:

Ver original</body>

De este modo, el código se ejecutará luego de terminada la carga del documento.

Saludos

pmfras · #6 (**permalink**) 11/11/2014, 08:42

sabes que me sigue sin andar!!, cambie esa linea, aunque dos cosas, ponerlo antes del body es solo evitar la linea en blanco que tengo, y otra

$(document).ready(function()

no hace que el doc este cargado?

GeekGirl · #7 (**permalink**) 11/11/2014, 09:22

Vos querés que cuando se apriete tab se envíe el formulario? Como si se apretara enter? En ese caso el código debería ser:

Código Javascript:

Ver original<script type="text/javascript">
    $(document).ready(function(){   
        var inputs = $("form :text"),
        length = inputs.length,
        i = 0;
 
        inputs.on("keydown", function(event) {
            var code = event.keyCode || event.which; 
                console.log(code);
            if (code == 9) {
                console.log('tab presionado');  
                event.preventDefault();
 
                $('#idDeTuForm').submit();
            }
        });
    });
</script>

Si lo que querés hacer es lo contrario, que al apretar enter se comporte como un tab, el código que te pasó Alexis88 es correcto. Y sí, en efecto el document ready hace que tu código se ejecute una vez que el documento está completamente cargado. Ojo igual que la parte que captura los inputs está por fuera del document ready y por tanto no los va a tomar. Debería ser así:

Código Javascript:

Ver original<script type="text/javascript">
    $(document).ready(function(){   
        var inputs = $("form :text"),
        length = inputs.length,
        i = 0;
 
        // El resto del código
    )};
</script>

Saludos :)

Alexis88 · #8 (**permalink**) 11/11/2014, 11:37

Es exactamente lo que te dice GeekGirl. No me había fijado que declarabas las variables por fuera del método .ready(). Te sugiero que la próxima vez utilices el highlight respectivo para publicar código, así será más legible.

Saludos

pmfras · #9 (**permalink**) 11/11/2014, 14:35

Listo , quedo muy bien, coloque lo que me faltaba dentro del $(document).ready

gracias a todos!!!, espero verlos en mi otra duda "Seleccionar un elemento de la tabla generada con ajax" al menos para tener una pista!!

saludos y gracias Alexis88 y GeekGirl nuevamente!! gracias x su tiempo.