Saltar Cajas de Textos con Enter

hoberwilly · #1 (**permalink**) 12/01/2009, 16:59

Amigos muy buenas,
Ingreso mi consulta con respecto a que quisiera me ayudaran a darle con respecto a que quisiera un codigo para que el usuario al ingresar datos a una caja de texto (cantidad autorizada) CON TAN SOLO DE ENTER se dirija a la otra caja de texto y asi sucesivamente esto con respecto AL FOREACH

dejo el codigo que trabajo:

Código php:

Ver original<!-- <body>
<form name="a<?php echo $v['identificador'] ?>" method="post" action="#" id="a<?php echo $v['identificador'] ?>">
<?php
foreach($carro as $k => $v)  
{
?>
<tr>
    <td align="center"><?php echo $v['id'] ?></td>
    <td><?php echo $v['producto'] ?></td>
    <td align="center"><input type="text" name="cantidad[]" size="4"></td>    //AQUI LAS CAJAS DE TEXTOS DEPENDERAN CUANTOS ITEMS TIENE UN ARRAY CARRO
</tr>
<?php
}
?>
</form> -->

Agradesco sus colaboraciones

hoberwilly · #2 (**permalink**) 13/01/2009, 08:14

Por favor si alguien pudiera ayudarme...gracias

refreegrata · #3 (**permalink**) 13/01/2009, 08:28

En el evento onkeypress determina el codigo
evento.keyCode en IE y evento.which para el resto. Si es 13 ha presionado ENTER
Luego simula el tab cambiando el foco. Algo así:

Código:

function TabEmulation(form,field)
{
	
		var next=0, found=false;
		var f=form;
		for(var i=0;i<f.length;i++)
		{
			if(field.name==f.elements[i].name)
			{
				next=i+1;
				found=true;
				break;
			}
		}
		while(found)
		{
			if( f.elements[next].disabled==false && f.elements[next].type!='hidden')
			{
				f.elements[next].focus();
				break;
			}
			else
			{
				if(next<f.length-1)
					next=next+1;
				else
					break;
			}
		}
	
}

Espero te sirva, Saludos.

chuchufuentes · #4 (**permalink**) 13/01/2009, 08:28

Aqui el codigo completo, adaptalo a tu necesidad, esto funciona

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>PRUEBA FORO !!!</title>
</head>

<script languaje="Javascript"> // este script hace que tabule el enter !!!
function tabular(e,obj)
{
tecla=(document.all) ? e.keyCode : e.which;
if(tecla!=13) return;
frm=obj.form;
for(i=0;i<frm.elements.length;i++)
if(frm.elements[i]==obj)
{
if (i==frm.elements.length-1)
i=-1;
break
}
/*ACA ESTA EL CAMBIO*/
if (frm.elements[i+1].disabled ==true )
tabular(e,frm.elements[i+1]);
else frm.elements[i+1].focus();
return false;
}

</script>

<body onLoad="document.getElementById('veni').focus();">
<?php
include ('conexion.php');
$result=mysql_query("SELECT * FROM materia_prima order by codigo DESC LIMIT 1" , $conexion);
while($fila = mysql_fetch_array($result)) //mientras haya registros en el resultado
{
$ultimo= $fila['codigo']+1;
}
?>
<form id="form" name="form" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
<?php
for($i=1;$i<8;$i++)
{
?>

<legend><font color="silver"><h1>ALTA MATERIA PRIMA</h1></font></legend>

Codigo: >>> <b><?php echo $ultimo+$i;?></b><br>

Nombre Materia Prima:
<input type="text" size=25 name="nombre[]" id="veni" onkeypress="return tabular(event,this)"><br>
Unidad:
<input type="text" size=8 name="unidad[]" onkeypress="return tabular(event,this)"><br>
Costo en Pesos:
<input type="text" size=12 name="costo_mp_pesos[]" onkeypress="return tabular(event,this)"><br>
Costo en Dolares:
<input type="text" size=12 name="costo_mp_dolar[]" onkeypress="return tabular(event,this)"><br>
<?php
}
?>

<br>

<input type="submit" value="REGISTRAR">

</form>
</body>
</html>

hoberwilly · #5 (**permalink**) 13/01/2009, 09:33

Gracias amigos por la ayuda prestada, solo quisiera me ayudaran con este FOREACH que me esta distorcionando todo el codigo anterior

hoberwilly · #6 (**permalink**) 13/01/2009, 11:15

Hola esto es lo que me acosejaste:
js

Código php:

Ver original<!-- function tabular(e,obj)
{
    tecla=(document.all) ? e.keyCode : e.which;
    if(tecla!=13) return;
    frm=obj.form;
    for(i=0;i<frm.elements.length;i++) 
    if(frm.elements[i]==obj)
    { 
        if(i==frm.elements.length-1)
            i=-1;
        break
    }
    if(frm.elements[i+1].disabled==true)
        tabular(e,frm.elements[i+1]);
    else 
        frm.elements[i+1].focus();
    return false;
} -->

pero no me funciona para mi caso debido a que esta este FOREACH: (ojo cambie en name e id del formulario por form)

Código php:

Ver original<!-- <form name="form" method="post" action="#" id="form">
<?php
foreach($carro as $k => $v)              /////////FOREACH
{
?>
<tr>
    <td align="center"><?php echo $v['id'] ?></td>
    <td><?php echo $v['producto'] ?></td>
    <td align="center"><input type="text" name="cantidad[]" size="4"></td>    //AQUI EL NAME ES cantidad[]
</tr>
<?php
}
?>
</form> -->

Necesito por favor sus ayudas

hoberwilly · #7 (**permalink**) 13/01/2009, 12:17

Sorry olvide decir k ya hice el cambio a la caja de texto:

<input type="text" name="cantidad[]" onKeypress="return tabular(event,this);">

si alguien tiene alguna idea de como adaptarlo, agradeceria mucho

hoberwilly · #8 (**permalink**) 13/01/2009, 17:01

Necesito de sus colaboraciones para mi caso,
Acomode en la caja de texto, y esto es lo k hice:

Código php:

Ver original<!-- <input type="text" name="cantidad[]" onKeypress="return tabular(event,this['cantidad[]']);"> -->

Ahora lo k me falta hacer unas variantes a la funcion:

Código php:

Ver original<!-- function tabular(e,frm)               //AQUI CAMBIE EL 2DO VALOR DE LA FUNCION OBJ X FRM
{
    tecla=(document.all) ? e.keyCode : e.which;
    if(tecla!=13) return;
    //frm=obj.form;    ////ESTO LO QUITE
    for(i=0;i<frm.elements.length;i++) 
    if(frm.elements[i]==obj)
    { 
        if(i==frm.elements.length-1)
            i=-1;
        break
    }
    if(frm.elements[i+1].disabled==true)
        tabular(e,frm.elements[i+1]);
    else 
        frm.elements[i+1].focus();
    return false;
} -->

Gracias de antemano,

hoberwilly · #9 (**permalink**) 13/01/2009, 17:33

Que mas puedo decir!
al dar enter a la primera caja de texto me dirige al submit eliminar que tengo en el codigo.

id producto cantidad
---------------------------
001 producto 1 .100.(caja d texto) <---| //enter y se dirige a submit eliminar
002 producto 2 ...... //DEBERIA IR AQUI EL CURSOR!!!!!!!!
005 producto 5 .....
009 producto 9 ......

eliminar(submit)
actualizar(submit)

Gracias

hoberwilly · #10 (**permalink**) 13/01/2009, 17:49

Gracias, seguire buscandole el hilo de esto...si x si alguien puede colaborar con sus sugerencias todo es bienvenido

hoberwilly · #11 (**permalink**) 14/01/2009, 08:25

Esto es posible, no encuentro nada en la web...solo encontre el post original de la FUNCION TABULAR de JavierB y nada mas...
Sera posible implementarlo para mi caso especial...gracias otra vez

hoberwilly · #12 (**permalink**) 14/01/2009, 10:47

Para JavierB,
por favor si me podrias guiarme como la puedo hacer, lo k encuentro es tu link del año 2007:
http://www.forosdelweb.com/f13/rutina-para-saltar-campos-con-enter-266875/

Saludos

refreegrata · #13 (**permalink**) 14/01/2009, 11:35

Primero:
Debieras llamar con tabular(event,this) y no con tabular(event,this['cantidad[]']);
Lo segundo:
Si tus botones estan al interior del form debieran ser de tipo button y controlar su accion con javascript ya que el hacer el ENTER siempre realiza el submit del primer tipo submit:

Código:

<input type="button" name="eliminar" id="eliminar" onclick="accion()"  />

y no

Código:

<input type="submit" name="eliminar" id="eliminar"  />

ha bueno y supongo que antes de crear las filas de la tabla usaste el tag <table>y al final </table>

Bueno espero esto te ayude,

.

hoberwilly · #14 (**permalink**) 14/01/2009, 11:52

Agradesco tu respuesta refreegata,
a lo indicado en la primera parte: aunque el evento tabular recoja un array: cantidad[]????
en la segunda:
mis botones estan dentro del form y son de tipo submit como en los ejemplos dados por JavierB, chuchufuentes o esto tiene que ver????
p.d. efectivamente tienen los tags <table></table>

Saludos,

refreegrata · #15 (**permalink**) 14/01/2009, 12:05

El this no necesita cantidad ya que el this hace mencion a el mismo y no al resto de los input aunque igual nombre tengan, asi que en la funcion no tendrias para comentar la linea frm=obj.form, ya que asi va a buscar los elementos del formulario.

ahora si te fijas al hacer un enter teniendo el foco al algun elemento del formulario y habiendo un boton submit se ejecutara el submit del formulario. Esa otra solucion que indicas tal vez salvo la situacion usando alguna otra de las tantas posibilidades que da la programacion, sin embargo lo que yo propongo es una de las soluciones posibles, prueba con lo que te digo total nada pierdes, excepto un par de minutos.

Código:

<script languaje="Javascript">
function accion()
{
   document.getElementById('form').submit();
}
</script>
<input type="button" name="eliminar" id="eliminar" onclick="accion()"  />

ahora esta claro que tendras que dejar alguna marca (como un hidden) que te indique sobre que boton hiciste click

hoberwilly · #16 (**permalink**) 14/01/2009, 13:04

Sigue lo mismo, No me Funciona!
js
--------

Código php:

Ver original<!-- function tabular(e,obj)
{
    tecla=(document.all) ? e.keyCode : e.which;
    if(tecla!=13) return;
    frm=obj.form;
    for(i=0;i<frm.elements.length;i++) 
        if(frm.elements[i]==obj)
        { 
            if(i==frm.elements.length-1)
                i=-1;
            break
        }
        if(frm.elements[i+1].disabled==true)
            tabular(e,frm.elements[i+1]);
        else 
            frm.elements[i+1].focus();
        return false;
} -->

y esto es la Caja de Texto (de name array cantidad)

Código php:

Ver original<!-- <input type="text" name="cantidad[]" onKeypress="return tabular(event,this);"> -->

ojo....que los elimine todos los submit existentes como prueba para que posiblimente no interfiera con las cajas de texto y nada

Una ayuda por favor

refreegrata · #17 (**permalink**) 14/01/2009, 13:29

Seguro no te funciona???
Y este codigo,(exactamente este para probar ya que a mi me funciona)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>&nbsp;</title>
<script language="JavaScript" type="text/Javascript">
function tabular(e,obj)
{
    tecla=(document.all) ? e.keyCode : e.which;
    if(tecla!=13) return;
    frm=obj.form;
    for(i=0;i<frm.elements.length;i++) 
        if(frm.elements[i]==obj)
        { 
            if(i==frm.elements.length-1)
                i=-1;
            break
        }
        if(frm.elements[i+1].disabled==true)
            tabular(e,frm.elements[i+1]);
        else 
            frm.elements[i+1].focus();
        return false;
}
</script>
</head>
<body>
<form name="form" method="post" action="#" id="form">
<table>
<tr>
<td><input type="text" name="cantidad[]" onkeypress="return tabular(event,this);" /></td>
</tr>
<tr>
<td><input type="text" name="cantidad[]" onkeypress="return tabular(event,this);" /></td>
</tr>
<tr>
<td><input type="text" name="cantidad[]" onkeypress="return tabular(event,this);" /></td>
</tr>
</table>
<input type="button" name="eliminar" id="eliminar" onclick="document.getElementById('form').submit();" />

</form>
</body>

No se tal vez estes armando mal tus cajas de texto, ojo debes posicinarte en la primera caja, o definir el foco en el onload o por ahí.

hoberwilly · #18 (**permalink**) 14/01/2009, 14:12

Gracias amigo por tu tiempo,
me alegra k te funcione para tu ejemplo, a mi tambien pero para ese ejemplo.

Si me podrias tonces ayudar para adaptarlo a este ejemplo ESPECIFICO por favor:

Código php:

Ver original<!-- <?php
foreach($carro as $k => $v)  
{
?>
<tr>
    <td align="center"><?php echo $v['id'] ?></td>
    <td><?php echo $v['producto'] ?></td>
    <td align="center"><input type="text" name="cantidad[]" size="4" onKeypress="return tabular(event,this);"></td>
</tr>
<?php
}
?> -->

ojo que $carro es un array que se recoje de una anterior

Saludos y gracias otra vez por el tiempo prestado

refreegrata · #19 (**permalink**) 14/01/2009, 14:33

hey el foreach de php no tendria por que influir, recuerda que el codigo php se ejecuta antes que termine de cargar la pagina, por lo tanto una vez cargada la pagina debiera quedar tu codigo html parecido al que yo envie y ya no debieran poder dibujarse mas cajas (a menos que uses dom, innerHtml, etc. ), el php no interactua al mismo tiempo con el html. ¿Por que no muestras el codigo html que se te genera una vez has cargado la pagina en esa seccion? (me refiero a lo que aparace cuando con el boton derecho pinchas en ver codigo fuente). Se me hace que tu problema esta en el php y como lo usas para diseñar tu html.

hoberwilly · #20 (**permalink**) 14/01/2009, 14:55

A ver amigo, si le das un vistazo a mi pagina:
http://usuarios.lycos.es/hoberwilly/
instrucciones: selecciona dos items, click en ver carrito, y aqui estamos en el problema

Estare atento las observaciones, gracias

refreegrata · #21 (**permalink**) 14/01/2009, 16:32

Mira, lo que pasa es que el foco se pierde entre los tipo hidden, submit y el resto de los elementos del formulario. Prueba reemplazar la funcion tabular por esto:

Código:

function Tab(f,field)
{
	
		var next=0, found=false;
		for(var i=0;i<f.length;i++)
		{
			if(field.name==f.elements[i].name)
			{
				next=i+1;
				found=true;
				break;
			}
		}
		while(found)
		{
			if( f.elements[next].disabled==false && f.elements[next].type=='text')
			{
				f.elements[next].focus();
				break;
			}
			else
			{
				if(next<f.length-1)
					next=next+1;
				else
					break;
			}
		}
	
}
function tabular(e,obj)
{
	tecla=(document.all) ? e.keyCode : e.which;
	if(tecla!=13) return;
	frm=obj.form;
	Tab(frm,obj);
	return false;
}

bueno, es solo una idea que si te funciona la deberias adaptar a tu problema
Espero te sirva.

hoberwilly · #22 (**permalink**) 14/01/2009, 16:56

Gracias amigo, al parecer vamos por buen camino...
el codigo arriba en mención disculpa la pregunta de k fuente la sacaste? debido a que necesita modificarla algunas cositas creo para k funcione a la perfeccion xq:
en un ejemplo que hize tenia 3 items y al dar click en la 1a caja de texto, llenar la cantidad solicitada y dar enter me dirijio al 2a caja, rellenar otra vez , PERO AL DAR ENTER me queda estatico en la 2da...

desmenuzar la funcion Tab faltaria, a mi parecer

refreegrata · #23 (**permalink**) 14/01/2009, 17:27

La fuente,mmm.. no recuerdo, ya de donde la baje ya que fue hace mucho tiempo.
Respecto a lo que envie antes, bueno fue mi culpa, se me olvido que los input tenian igual nombre. Con esto si debiera ir:

Código:

function tabular(e,obj)
{
    tecla=(document.all) ? e.keyCode : e.which;
    if(tecla!=13) return;
    frm=obj.form;
    for(i=0;i<frm.elements.length;i++) 
        if(frm.elements[i]==obj)
        { 
            if(i==frm.elements.length-1)
                i=-1;
            break
        }
        if((frm.elements[i+1].disabled==true)||(frm.elements[i+1].type!='text'))
            tabular(e,frm.elements[i+1]);
        else 
            frm.elements[i+1].focus();
        return false;
}

ks_al · #24 (**permalink**) 14/01/2009, 17:53

Espero y te sirva este pequeño ejemplo:

<input type="text" name="caja_texto1" id="caja_texto1" onkeypress="return validar_letras_numeros(event)" onkeyup="javascript: if(event.keyCode==13){document.formulario.caja_tex to2.focus();}" />

donde la funcion onkeypress te validara las letras o numeros que acepte tu caja de texto.

y el onkeyup te validara si presiono enter pasandote a la siguiente caja que lo decees posicionar

hoberwilly · #25 (**permalink**) 15/01/2009, 07:06

Muchisimas gracias refreegrata, de veras que llegue al punto de tirarlo al tacho esta parte pero de no ser de todos ustedes que estan alli para apoyarnos (a los que estamos iniciando).

Repito muchisimas gracias, idem tambien para chuchufuentes y ks_al por su tiempo.

Solo una ultima consulta porque al adicionarle otra funcion al evento ONKEYPRESS de la caja de texto no me funciona este ultimo???? o en que estoy errado????

Código php:

Ver original<!-- <input type="text" name="cantidad[]" onKeypress="return tabular(event,this) && acceptNumNumero(this);"> -->

refreegrata · #26 (**permalink**) 15/01/2009, 08:13

De eso ultimo, mmm. no estoy seguro de que la sintaxis sea correcta.
Si lo que quieres es evaluar que sea numero mientras se escribe tendrias que modificar la funcion tabular para que haga el tab si es 13(ENTER), de lo contrario analize si es numero( entre 47 y 48), si no retorna falso.
Ahora si lo que quires es evaluar al desenfocar tiene que llamar a alguna funcion en el evento onblur, pero la idea es llamar a una unica funcion que te retorne true o false y que evalue las posibilidades y no algo como: return tabular(event,this) && acceptNumNumero(this);

hoberwilly · #27 (**permalink**) 15/01/2009, 13:01

Hola refreegrata,
esta si es la ultima consulta, si se podra realizar que al cargar la pagina se pueda colocar el focus en la primera caja de texto (EN RELACION A LA ULTIMA JS).

esto no funciona:

Código php:

Ver original<!-- <body onLoad="document.getElementByName('cantidad').focus();">
<input type="text" name="cantidad[]" onKeypress="tabular(event,this);acceptNumNumero(this);"> --> -->

Gracias,

hoberwilly · #28 (**permalink**) 15/01/2009, 16:52

Hola,
intente con esto:

Código php:

Ver original<!-- <body onLoad="document.forms[0]['cantidad[0]'].focus();"> -->

pero no me funciona!

hoberwilly · #29 (**permalink**) 16/01/2009, 11:18

Hola amigos, por favor si me podrian ayudar a darle con la implementacion...gracias

refreegrata · #30 (**permalink**) 17/01/2009, 10:10

Y si le colocas a cada input un id distinto es decir si los haces en un ciclo no seria dificil que te quedaran:

Código:

<input name="cantidad[]" id="cantidad0"...
<input name="cantidad[]" id="cantidad1"...
.
.
<input name="cantidad[]" id="cantidadn"...

y en el onload colocas document.getElementById('cantidad0').focus();

si eso no te agrada determina que numero de elemento en el formulario es, por lo general el primero siempre seria el mismo y has algo asi:

document.getElementById('form').elements[2].focus();

Me parace que seria mejor la primera ya que de esa manera es mas facil identificar de manera individual cada uno y podria servirte mas adelante.