En este tip usaremos las capacidades de uso de scripts del lado del cliente que

incluye ASP.NET . Debo confesar que estoy muy mal acostumbrado al ambiente de la
s aplicaciones desktop y, ms an, a esas con el estilo del viejo MS-DOS donde los f
ormularios se enfocaban en el uso extenso del teclado y en concreto al uso de la
tecla <ENTER> para moverse entre campos de los formularios me encuentro ms natura
l <ENTER> que Tab y me imagino que muchos otros usuarios y desarrolladores tiene
n la misma aoranza; por eso quiero compartir con ustedes este tip que uso para lo
grar el mismo efecto en formularios Web usando ASP.NET y un poco de JavaScript
El objetivo es bastante simple: Se trata de saltar de un campo del formulario We
b a otro al presionar la tecla <ENTER>. Para ello vamos a usar una rutina en Jav
aScript que va a detectar cuando se presione la tecla <ENTER> sobre nuestra vent
ana de exploracin y va a cambiar el control con el foco de entrada al siguiente.
El resultado debe ser un cdigo que obtenga esta funcionalidad sin importar los co
ntroles del formulario y que podamos usar el mismo cdigo en cualquier formulario
Web deseado. Lo que haremos ser un arreglo en JavaScript del lado del cliente con
los nombres de los controles junto con una variable que nos servir de ndice para
sealar cul es el siguiente control dentro de este arreglo y as pasarle el foco al c
ontrol indicado. Para esto, al cargar el formulario Web, crearemos este arreglo
y lo registraremos del lado cliente usando el mtodo RegisterArrayDeclaration de l
a pgina como se muestra a continuacin:
StringBuilder cs = new StringBuilder();
()
//recorremos todos los controles en el formulario
foreach(Control c in Page.FindControl(fName).Controls)
{
//Nos interesan por ahora slo los TextBoxes
if ((c is TextBox) && (((TextBox)c).Enabled) && (!((Text
Box)c).ReadOnly))
{
//construimos el arreglo o vector paso a paso
cs.Append(" '"+c.ID+"',");
()
}
}
string holder = cs.ToString().Substring(0, cs.Length -1);
//registramos la cadena construida como un arreglo de JavaScript
Page.RegisterArrayDeclaration("controles", holder);

Teniendo ya los controles (slo Textboxes en este caso), registremos el script del
lado del cliente que har que funcione usando RegisterClientScriptBlock.

StringBuilder sb = new StringBuilder();
sb.Append("<scrip t language=javascript>");
sb.Append("< !-- The JavaScript Source!! http://javascript.internet.com
-->"); //Inspiracin
sb.Append("nextControl = 0;"); ///nextControl es el ndice del prximo
sb.Append("Frm = '"+fName+"';");
sb.Append("ccount ="+control_count.ToString()+";");
sb.Append("netscape = document.layers;");
sb.Append("function kPress( eventoPulsaTecla ) ");//Aqu se intercepta el
evento en JavaScript
sb.Append("{ tecla = (netscape) ? eventoPulsaTecla.which : window.event
.keyCode;");
sb.Append(" if (tecla == 13) { ");
sb.Append(" eval('document.' + Frm + '.' + controles[nextControl
] + '.focus()');");
sb.Append(" eval('if(nextControl < ccount-1) nextControl++; else
nextControl = 0;');");
sb.Append(" return false; } }");
sb.Append("document.onkeydown = kPress; ");
sb.Append("if (netscape) document.captureEvents(Event.KEYDOWN); ");
sb.Append("</script>");
Page.RegisterClientScriptBlock("<ENTER>", sb.ToString());
El script usa el arreglo conteniendo los nombres de los controles para saber cua
l es el control a darle la atencin del teclado mediante la variable nextControl y
para que retorne al primero de los controles una vez llegado al ltimo. Ntese el u
so de StringBuilder por razones de eficiencia ya que concatenamos varias cadenas
de texto. Eso implica el uso del namespace System.Text. Este cdigo funciona pero
tiene un pequeo defecto y es que si nos movemos de control usando otro mtodo que
no sea mediante la tecla <ENTER>, ya sea con el ratn o con Tab, se pierde la sinc
ronizacin y retorna justo donde el control que apunte el ndice nextControl lo cual
se puede resolver "pegando" un poco de JavaScript a cada uno de nuestros contro
les en el evento onfocus de cada uno para que en la ejecucin de ese evento se aju
ste el valor de nextControl; eso lo logramos mediante coleccin Attributes del con
trol como se muestra a continuacin.
//Aadimos un evento adicional para controlar el cambio de focus
((TextBox)c).Attributes.Add("onfocus","javascript:nextControl="+control_count.To
String()+";");
A continuacin el cdigo completo del mtodo que hemos desarrollado. Basta con llamarl
o durante el evento Load de la pgina para funcione.

protected void RegisterENTERRoutine()
{
StringBuilder cs = new StringBuilder();
string fName="Form1"; ///Nombre del formulario cambiar si es nec
esario
int control_count = 0;
///recorremos todos los controles en el formulario
foreach(Control c in Page.FindControl(fName).Controls)
{
///Nos interesan por ahora slo los TextBoxes
if ((c is TextBox) && (((TextBox)c).Enabled) && (!((Text
Box)c).ReadOnly))
{
///construimos el arreglo o vector paso a paso
cs.Append(" '"+c.ID+"',");
control_count++;
///Aadimos un evento adicional para controlar el cambio d
e focus
((TextBox)c).Attributes.Add("onfocus","javascript:nextControl="+control_count.To
String()+";");
}
}
string holder = cs.ToString().Substring(0, cs.Length -1);
///registramos la cadena construida como un arreglo de JavaScrip
t
Page.RegisterArrayDeclaration("controles", holder);
///Ahora el script que dar vida a esto
StringBuilder sb = new StringBuilder();
sb.Append("<script language=javascript>");
sb.Append("<!-- The JavaScript Source!! http://javascript.intern
et.com -->"); ///Inspiracin
sb.Append("nextControl = 0;"); ///nextControl es el ndice del prxi
mo
sb.Append("Frm = '"+fName+"';");
sb.Append("ccount ="+control_count.ToString()+";");
sb.Append("netscape = document.layers;");
sb.Append("function kPress( eventoPulsaTecla ) ");///Aqu se inter
cepta el evento
sb.Append("{ tecla = (netscape) ? eventoPulsaTecla.which : wind
ow.event.keyCode;");
sb.Append(" if (tecla == 13) { ");
sb.Append(" eval('document.' + Frm + '.' + contr
oles[nextControl] + '.focus()');");
sb.Append(" eval('if(nextControl < ccount-1) nex
tControl++; else nextControl = 0;');");
sb.Append(" return false; } }");
sb.Append("document.onkeydown = kPress; ");
sb.Append("if (netscape) document.captureEvents(Event.KE
YDOWN); ");
sb.Append("</script>");
Page.RegisterClientScriptBlock("<ENTER>", sb.ToString())
;
}
Espero que les haya parecido interesante este cdigo y cualquier mejora o sugerenc
ia me la hagan saber
--------------------------------------------------------------------------------
Espacios de nombres usados en el cdigo de este artculo:
System...
System.Text