Foros del Web » Programando para Internet » Javascript »

Como moverse entre inputs con las flechas del teclado

Estas en el tema de Como moverse entre inputs con las flechas del teclado en el foro de Javascript en Foros del Web. Hola y muchisimas gracias de antemano. En un proyecto es necesario que podamos cambiar de input utilizando las flechas como si fuera excel, es decir, ...
  #1 (permalink)  
Antiguo 24/04/2013, 22:55
 
Fecha de Ingreso: agosto-2012
Mensajes: 3
Antigüedad: 11 años, 8 meses
Puntos: 0
Pregunta Como moverse entre inputs con las flechas del teclado

Hola y muchisimas gracias de antemano.
En un proyecto es necesario que podamos cambiar de input utilizando las flechas como si fuera excel, es decir, hay una tabla de 7 x 3 donde cada celda incluye un input type text pero usar tabindex no es suficiente ya que solo se le puede dar un orden digamos lineal, aqui es necesario poder pasar al campo de arriba, derecha, abajo o izquierda en cualquier orden y solo pulsando las las flechas del teclado.

Si algun experto tiene idea de como puedo realizar esta tarea estare enormemente agradecido, si no tambien, y los felicito por la gran ayuda que dan las personas que responden, igualmente a los que hacen buenas preguntas.

Ya busque por todos lados y aun no encuentro la solucion.

DE NUEVO MUCHAS GRAICAS!!
  #2 (permalink)  
Antiguo 25/04/2013, 03:16
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 14 años, 9 meses
Puntos: 22
Respuesta: Como moverse entre inputs con las flechas del teclado

Yo lo plantearía de la siguiente manera.

1. Cada input tendría un id que le identifique (celda1, celda2, celda3, etc)

2. Creas una variable que guarde la celda actual y una función que cuando se pulse en una celda actualice esta variable. Haces click en la celda6, pues var celdaActual = celda6

3. Ahora creas una función que reconozca si se ha pulsado uno de los cursores. Mira aquí: http://stackoverflow.com/questions/5...-in-javascript

4. Y ahora cambias el foco en función del cursor pulsado. Si pulsas derecha o izquierda, pasas a la siguiente celda o a la anterior. Si pulsas arriba, restas el número de columnas (ejemplo: Estás en celda9 y se pulsa arriba. Como en tu caso tienes 7 columnas, tienes que pasar a celda2). Si pulsas abajo, pues al reves, sumas el número de columna. Tendrás que controlar que no te sales del conjunto de celdas.

Si usas jQuery o cualquier otra biblioteca javascript que te permita gestionar cómodamente los eventos de javascript, no debería ser demasiado complicado. (De hecho es posible que en jQuery ya exista algo hecho)

Supongo que planteándolo así podrías solucionar el problema.
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla

Etiquetas: form, html, inputs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:52.