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:
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?
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 :(
Post a Comment