Foro de programación en PHP
moverse con flechas del teclado
| Autor: alberto Publicado: 13-6-2008 09:28 AM |
|
| hola a todos,estoy creando varias tablas para una aplicacion web, y me gustaria poder moverme en los campos de estas con las flechas del teclado, arriba, abajo , derecha, izqierda.. y no solamente con la tecla tab o tener q usar el mouse para apuntar al campo q qiero editar... alguien sabe como??? | |
| Autor: Natxo Publicado: 13-6-2008 11:03 AM |
|
| Hola Alberto, a ver si esto te sirve <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <script language="javascript"> function mover(campo, event) { //sacamos en la variable enterCodigo el código de tecla //40 abajo //39 derecha //37 izquierda //38 arriba //alert(enterCodigo); var enterCodigo = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; var i; var anchura = 3;//número de elementos del formulario en horizontal var altura = 4;//número de elementos del formulario en vertical //sacamos el campo que tiene el foco y guardamos su orden en la variable "i" for (i = 0; i < campo.form.elements.length; i++) if (campo == campo.form.elements) break; //Un alert para saber en qué número de campo está, va de 0 al número de campos -1 //alert(i); if (enterCodigo == 40) { //pulsa el cursor de abajo if (i >= (anchura * (altura - 1)))//está en la última fila y hay que subirlo a la primera { i = i - (anchura * (altura - 1)); }//fin del i>= else {//está en la primera o segunda fila i = i + anchura;//avanzamos de fila }//fin del else }//fin del if enterCodigo == 40 else if (enterCodigo == 38) { //pulsa el cursor de arriba if (i <= (anchura - 1))//está en la primera fila y hay que bajarlo a la última { i = i + (anchura * (altura - 1)); }//fin del i>= else {//está en la segunda o tercera fila i = i - anchura;//retrocedemos de fila }//fin del else }//fin del if enterCodigo == 38 else if (enterCodigo == 37) { //pulsa el cursor de izquierda if (i % anchura == 0)//está en la primera columna y hay que desplazarlo a la última { i = i + (anchura - 1); }//fin del i% else {//está en la segunda o tercera columna i = i - 1;//retrocedemos de fila }//fin del else }//fin del if enterCodigo == 37 else if (enterCodigo == 39) { //pulsa el cursor de derecha if (i % anchura == (anchura - 1))//está en la última columna y hay que desplazarlo a la primera { i = i - (anchura - 1); }//fin del i% else {//está en la primera o segunda columna i = i + 1;//retrocedemos de fila }//fin del else }//fin del if enterCodigo == 39 // Ponemos el foco al elemento de formulario campo.form.elements.focus(); } </script> </head> <body> <form name="form1" > <table width="200" border="1"> <tr> <td><input type="text" name="arriba0" id="arriba0" onkeypress="mover(this, event)"/></td> <td><label> <input type="text" name="arriba1" id="arriba1" onkeypress="mover(this, event)"/> </label></td> <td><input type="text" name="arriba2" id="arriba2" onkeypress="mover(this, event)"/></td> </tr> <tr> <td><input type="text" name="centro0" id="centro0" onkeypress="mover(this, event)"/></td> <td><input type="text" name="centro1" id="centro1" onkeypress="mover(this, event)"/></td> <td><input type="text" name="centro2" id="centro2" onkeypress="mover(this, event)"/></td> </tr> <tr> <td><input type="text" name="abajo0" id="abajo0" onkeypress="mover(this, event)"/></td> <td><input type="text" name="abajo1" id="abajo1" onkeypress="mover(this, event)"/></td> <td><input type="text" name="abajo2" id="abajo2" onkeypress="mover(this, event)"/></td> </tr> <tr> <td><input type="text" name="abajo0" id="abajo0" onkeypress="mover(this, event)"/></td> <td><input type="text" name="abajo1" id="abajo1" onkeypress="mover(this, event)"/></td> <td><input type="text" name="abajo2" id="abajo2" onkeypress="mover(this, event)"/></td> </tr> </table> </form> </body> </html> |
|