Wednesday, February 6, 2008

Arrow Key Navigation in Textboxes

Hello everyone,

Well I decided today that instead of posting total theory stuff, lets do some hands around and coding..Few days ago..I had requirement which stated that when user press Down arrow and Up arrow, cursor should move accordingly in ASP.NET Form..It took my brain off for a while to implement such Javascript in this dynamically created Textboxes..but finally done with it.

Its working with Mozilla too ;)

HTML Code :

<head
runat="server">


<title>My Arrow Key Demo</title>

<script
language="javascript"
type="text/javascript"
>


function keyPressed(TB,e)

{


if(e.keyCode == 40 || e.keyCode == 13)

{


var i = parseInt(TB.substring(7,8)) + 1

document.getElementById("TextBox"+i).focus()

}


if(e.keyCode == 38)

{


var i = parseInt(TB.substring(7,8)) - 1

document.getElementById("TextBox"+i).focus()

}

}

</script>

</head>

<body>


<form
id="form1"
runat="server">


<div>


<br
/>


<asp:Table
ID="DataEntry1"
style="height:141px; background:#F7F7F7"
cellpadding="1"
border="1"
cellspacing="1"
runat
="server"
>


</asp:Table>


</div>


</form>

</body>

</html>


 

.NET Code


 

Protected
Sub Page_Load(ByVal sender As
Object, ByVal e As System.EventArgs) Handles
Me.Load


Try


Dim i As
Integer


For i = 1 To cnt


Dim tcell As
New TableCell


Dim trow As
New TableRow


Dim txtbx As
New TextBox

txtbx.ID = "TextBox" + i.ToString()

         'Add JavaScript to Textbox

txtbx.Attributes.Add("onkeyup", "keyPressed(this.id,event)")

txtbx.Width = 60

txtbx.Height = 13

tcell.Controls.Add(txtbx)

tcell.Width = 61

trow.Cells.Add(tcell)

trow.Style.Add("Align", "Center")

DataEntry1.Rows.Add(trow)


Next


Catch ex As Exception

Response.Write(ex.Message.ToString())


End
Try


End
Sub

Thats it...till the day we came across how to make Button as Default.Tab navigation which is by default..and here it is...ArrowKey navigation in Form.


 

Vikram Pendse.

2 comments:

Unknown said...

hello..i have the exact same requirement.when i try to run the code it thorws an eroor on line document.getElementById("TextBox"+i).focus()
'document.getElementById(...)' is null or not an object.could you please help?

msrprasad said...

I have different requirement that is navigate between buttons using Arrow keys ... could you please throw some light on it. I am basically a C++ developer for Embedded systems so really not familiar with Web stuff :(