Foros del Web » Programando para Internet » Javascript »

Nuevo Formulario para Internet explorer y Mozilla tipo excel

 Estas en el tema de Nuevo Formulario para Internet explorer y Mozilla tipo excel en el foro de Javascript en Foros del Web. Saludos a todos!!! Despues de investigar y buscar como loco. Desarrolle un formulario por el cual se pueden mover por todos los campos como si ...
  #1 (permalink)  
Antiguo 01/10/2009, 10:09
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 14 años, 10 meses
Puntos: 0
Nuevo Formulario para Internet explorer y Mozilla tipo excel
Saludos a todos!!!

Despues de investigar y buscar como loco.

Desarrolle un formulario por el cual se pueden mover por todos los campos como si estubieran en excel usando las flechas, tambien valida q solo puedan ingresar solo numeros y pues si llegas a la ultima columna de pasa a la siguiente fila de la primera columna, tambien selecciona todo el campo cuando pasas por el, jejeje como excel, esto lo hice para un sistema de una gente q estaba muy habituada a excel.

y claro si le das enter procesa el formulario!!!

y como todo funciona para internet explorer, mozilla, safari y crohme . todos!!



Ojala les pueda servir!!!

Deje comentado cada parte,, bye


PDT: yo genere este formulario en PHP para crear hasta mil campos!!!
  #2 (permalink)  
Antiguo 01/10/2009, 10:10
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Nuevo Formulario para Internet explorer y Mozilla tipo excel
//CODIGO DEL SCRIPT - MAS ABAJO EL HTML



<script language="JavaScript">
//Aqui valido q navegador esta usando
var browser=navigator.appName;

//Funcion para cuando oprimes a la IZQUIERDA pase a la celda de la IZQUIERDA
function I(e,t)
{
if (browser=="Microsoft Internet Explorer") {

var teclaIE=event.keyCode;
var teclaN=0;
}else{var teclaN=e.which; var teclaIE=0;}
if (teclaN==37 || teclaIE==37) {
t.focus();
}
}


//Funcion para cuando oprimes a la ARRIBA pase a la celda de la ARRIBA
function AR(e,t)
{
if (browser=="Microsoft Internet Explorer") {

var teclaIE=event.keyCode;
var teclaN=0;
}else{var teclaN=e.which; var teclaIE=0;}
if (teclaN==38 || teclaIE==38) {
t.focus();
}
}

//Funcion para cuando oprimes a la DERECHA pase a la celda de la DERECHA
function D(e,t)
{
if (browser=="Microsoft Internet Explorer") {
var teclaIE=event.keyCode;
var teclaN=0;
}else{var teclaN=e.which; var teclaIE=0;}
if (teclaN==39 || teclaIE==39) {
t.focus();

}
}

//Funcion para cuando oprimes a la ABAJO pase a la celda de la ABAJO
function AB(e,t)
{
if (browser=="Microsoft Internet Explorer") {
var teclaIE=event.keyCode;
var teclaN=0;
}else{var teclaN=e.which; var teclaIE=0;}
if (teclaN==40 || teclaIE==40) {
t.focus();
}
}


//seleciona el campo por el cual estas pasando
function SelectAll(id)
{
document.getElementById(id).select();
}

//funcion para desabilitar letras y q solo funcionen los nuemros en Mozilla y otros navegadores
function is_intie(event)
{
if (browser=="Microsoft Internet Explorer") {
if(event.keyCode == 13 ) {
document.getElementById("boton").focus();
}else{
if (event.keyCode==8 || event.keyCode==46 ||(event.keyCode < 48 || event.keyCode > 57 ))
return false;
else return true;
}
}else{
var Key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if(Key == 13 ) {
document.getElementById("boton").focus();
}else{
var Key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( Key==8 || Key==46 ||(Key < 48 || Key >57)) return false;
else return true;
}
}
}
</script>
Última edición por juanchaco; 01/10/2009 a las 17:29 Razón: correccion
  #3 (permalink)  
Antiguo 01/10/2009, 10:12
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Nuevo Formulario para Internet explorer y Mozilla tipo excel
SEGUNDA PARTE - HTML DEL DE ARRIBA - NO OLVIDA BORRAR ESTE TITULO!!!


<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td align="center">
<form action="procesarapuesta.php" method="post" enctype="multipart/form-data" name="form1">
<input name="numerozona" type="hidden" id="numerozona" value="39" size="10" />
<input name="numerociudad" type="hidden" id="numerociudad" value="7" size="10" />
<input name="idlotero" type="hidden" id="idlotero" value="admin" size="10" />
<input name="iddigitador" type="hidden" id="iddigitador" value="admin" size="10" />
<input name="fechaingreso" type="hidden" id="fechaingreso" value="1254369600" size="10" />
<br/>

<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;&nbsp;A</td>
<td>&nbsp;&nbsp;<span class="alltext">B</span></td>
<td><span class="alltext">&nbsp;C&nbsp;</span></td>
<td>&nbsp;&nbsp;<span class="alltext">D</span>&nbsp;&nbsp;</td>
</tr>

<tr class="alltext"><td align="center"> 1</td align="center">
<td align="center" >
<input onfocus="SelectAll('numero1')"
onKeyDown="
D(event,this.form.valor1);
I(event,this.form.combinado0);
AR(event,this.form.numero0);
AB(event,this.form.numero2);"
name="numero1" type="text" class="imputbox" id="numero1" size="3" maxlength="4" autocomplete="off" onKeypress="return is_intie(event);" /></td align="center">
<td align="center">
<input onfocus="SelectAll('valor1')"
onKeyDown="
D(event,this.form.box1c1);
I(event,this.form.numero1);
AR(event,this.form.valor0);
AB(event,this.form.valor2);" name="valor1" type="text" class="imputbox" id="valor1" size="9" maxlength="9" autocomplete="off" onKeypress="return is_intie(event);" /></td align="center">
<td align="left">&nbsp;

<input onfocus="SelectAll('box1c1')"
onKeyDown="
I(event,this.form.valor1);
D(event,this.form.box1c2);
AR(event,this.form.box0c1);
AB(event,this.form.box2c1);" name="box1c1" id="box1c1" type="text" size="1" maxlength="2" onKeypress="return is_intie(event);"/>
<input onfocus="SelectAll('box1c2')"
onKeyDown="
I(event,this.form.box1c1);
D(event,this.form.box1c3);
AR(event,this.form.box0c2);
AB(event,this.form.box2c2);"
name="box1c2" type="text" id="box1c2" size="1" maxlength="2" onKeypress="return is_intie(event);"/>
<input onfocus="SelectAll('box1c3')"
onKeyDown="
I(event,this.form.box1c2);
D(event,this.form.combinado1);
AR(event,this.form.box0c3);
AB(event,this.form.box2c3);"
name="box1c3" type="text" id="box1c3" size="1" maxlength="2" onKeypress="return is_intie(event);"/></td align="center">
<td align="center">
<input onfocus="SelectAll('combinado1')"
onKeyDown="
I(event,this.form.box1c3);
D(event,this.form.numero2);
AR(event,this.form.combinado0);
AB(event,this.form.combinado2);"
name="combinado1" type="password" id="combinado1" size="1" maxlength="1" /></td align="center">
</tr>

<tr class="alltext"><td align="center"> 2</td align="center">
<td align="center" >
<input onfocus="SelectAll('numero2')"
onKeyDown="
D(event,this.form.valor2);
I(event,this.form.combinado1);
AR(event,this.form.numero1);
AB(event,this.form.numero3);"
name="numero2" type="text" class="imputbox" id="numero2" size="3" maxlength="4" autocomplete="off" onKeypress="return is_intie(event);" /></td align="center">
<td align="center">
<input onfocus="SelectAll('valor2')"
onKeyDown="
D(event,this.form.box2c1);
I(event,this.form.numero2);
AR(event,this.form.valor1);
AB(event,this.form.valor3);" name="valor2" type="text" class="imputbox" id="valor2" size="9" maxlength="9" autocomplete="off" onKeypress="return is_intie(event);" /></td align="center">
<td align="left">&nbsp;

<input onfocus="SelectAll('box2c1')"
onKeyDown="
I(event,this.form.valor2);
D(event,this.form.box2c2);
AR(event,this.form.box1c1);
AB(event,this.form.box3c1);" name="box2c1" id="box2c1" type="text" size="1" maxlength="2" onKeypress="return is_intie(event);"/>
<input onfocus="SelectAll('box2c2')"
onKeyDown="
I(event,this.form.box2c1);
D(event,this.form.box2c3);
AR(event,this.form.box1c2);
AB(event,this.form.box3c2);"
name="box2c2" type="text" id="box2c2" size="1" maxlength="2" onKeypress="return is_intie(event);"/>
<input onfocus="SelectAll('box2c3')"
onKeyDown="
I(event,this.form.box2c2);
D(event,this.form.combinado2);
AR(event,this.form.box1c3);
AB(event,this.form.box3c3);"
name="box2c3" type="text" id="box2c3" size="1" maxlength="2" onKeypress="return is_intie(event);"/></td align="center">
<td align="center">
<input onfocus="SelectAll('combinado2')"
onKeyDown="
I(event,this.form.box2c3);
D(event,this.form.numero3);
AR(event,this.form.combinado1);
AB(event,this.form.combinado3);"
name="combinado2" type="password" id="combinado2" size="1" maxlength="1" /></td align="center">
</tr>

<tr class="alltext"><td align="center"> 3</td align="center">
<td align="center" >
<input onfocus="SelectAll('numero3')"
onKeyDown="
D(event,this.form.valor3);
I(event,this.form.combinado2);
AR(event,this.form.numero2);
AB(event,this.form.numero4);"
name="numero3" type="text" class="imputbox" id="numero3" size="3" maxlength="4" autocomplete="off" onKeypress="return is_intie(event);" /></td align="center">
<td align="center">
<input onfocus="SelectAll('valor3')"
onKeyDown="
D(event,this.form.box3c1);
I(event,this.form.numero3);
AR(event,this.form.valor2);
AB(event,this.form.valor4);" name="valor3" type="text" class="imputbox" id="valor3" size="9" maxlength="9" autocomplete="off" onKeypress="return is_intie(event);" /></td align="center">
<td align="left">&nbsp;

<input onfocus="SelectAll('box3c1')"
onKeyDown="
I(event,this.form.valor3);
D(event,this.form.box3c2);
AR(event,this.form.box2c1);
AB(event,this.form.box4c1);" name="box3c1" id="box3c1" type="text" size="1" maxlength="2" onKeypress="return is_intie(event);"/>
<input onfocus="SelectAll('box3c2')"
onKeyDown="
I(event,this.form.box3c1);
D(event,this.form.box3c3);
AR(event,this.form.box2c2);
AB(event,this.form.box4c2);"
name="box3c2" type="text" id="box3c2" size="1" maxlength="2" onKeypress="return is_intie(event);"/>
<input onfocus="SelectAll('box3c3')"
onKeyDown="
I(event,this.form.box3c2);
D(event,this.form.combinado3);
AR(event,this.form.box2c3);
AB(event,this.form.box4c3);"
name="box3c3" type="text" id="box3c3" size="1" maxlength="2" onKeypress="return is_intie(event);"/></td align="center">
<td align="center">
<input onfocus="SelectAll('combinado3')"
onKeyDown="
I(event,this.form.box3c3);
D(event,this.form.numero4);
AR(event,this.form.combinado2);
AB(event,this.form.combinado4);"
name="combinado3" type="password" id="combinado3" size="1" maxlength="1" /></td align="center">
</tr>
</table>
<input name="numeroloterias" type="hidden" id="numeroloterias" value="4" size="10" />
<input name="boton" type="submit" id="boton" value="Salvar" />

</form>
</td></tr>
</table>



</body>
Última edición por juanchaco; 01/10/2009 a las 12:14 Razón: CORRECION
  #4 (permalink)  
Antiguo 01/10/2009, 10:41
Avatar de chulifo  
Fecha de Ingreso: abril-2009
Ubicación: perdido en codigos del PHP, pero aprendo rapido!
Mensajes: 524
Antigüedad: 15 años
Puntos: 18
Respuesta: Nuevo Formulario para Internet explorer y Mozilla tipo excel
no puedo teclear nada en las areas :X
__________________
Solo soy un simple fanático que mata el tiempo de la mejor manera.
  #5 (permalink)  
Antiguo 01/10/2009, 12:08
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 14 años, 10 meses
Puntos: 0
Respuesta: Nuevo Formulario para Internet explorer y Mozilla tipo excel
Cita:
Iniciado por chulifo Ver Mensaje
no puedo teclear nada en las areas :X
YA LO CORREGI!!!

sale mas corto jejeje si quieres activar los alert para ver q si funciona!!!

Saludos!!!
Última edición por juanchaco; 01/10/2009 a las 12:15
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:43.