TextBox – How To get focus on next textbox Upon Carriage Return Press In TextBox

[satyabhaskar]

hi all,
In my web page i have 3 text boxes and one submit button...Actual ly my problem is how do i focus on 2nd text box upon (pressing enter key)carriage return press in the first text box after entering some text in first text box...

Thanks in advance,

[kenobewan]

Not sure why you would want to this, but you should be able to get this work not using a submit button and chosing the right event.

[satyabhaskar]

i want my project to be more flexible to the users who use my project... the user should type text in the control and soon he press enter he should be able to type text in another textbox next to the previous text box....and so on.... after the focus comes on the submit button if he press enter then the form should get submitted...

[alamodgal]

hiiiiiiiii
You should use tabindex property of textbox.Keep tabindex property of first textbox 1,then 2 for second textbox n so on............. .....

[satyabhaskar]

hi,
thanks for reply,,,if i put tab index for each text box it works well if the user press tab key.. but i want the same functionality when user press enter key....
thanks..

[alamodgal]

hiiiiiiii
Give onkeydown property for all your textboxes like this:


<asp:TextBox ID="name" runat="server" onKeyDown="if(e vent.keyCode==1 3) event.keyCode=9 ;"></asp:TextBox>

[alamodgal]

I hope you know got the solution of ur problem.

[Frinavale]

Hi there,

Alamodgal's suggestion is correct however not very clear.

You need to use JavaScript in order to control what is happening in the web browser (client side) while user is using your page.

You need to write a JavaScript function that will capture which key the user pressed, check whether that key was the enter key, and either move to the "next" text box or submit the form.

So, taking a further look at Alamodgal's suggested code:

<asp:TextBox ID="name" runat="server" onKeyDown="if(event.keyCode==13) event.keyCode=9;"></asp:TextBox>

Here Alamodgal has specified some code that handles the "onkeydown" JavaScript event for the TextBox.

Right now the code checks if the user has pressed the enter key (an ascii value of 13) but it doesn't do anything.

If I were you I'd create a JavaScript function to handle the "onkeydown" events for each textbox on the page instead of supplying code inline like Alamodgal suggested.

Something like (JavaScript code):
[code=JavaScript]
function MoveToNextTextB ox(e)
{
//Determining what key was pressed
var keynum;
if (window.event || e.keyCode) {
keynum = e.keyCode;
}
else if (e.which) {
keynum = e.which;
}

//checking if the key pressed was the enter key (13)
if(keynum == 13)
{
//in here "move to the next TextBox"
}

}
[/code]

Now the thing is, you have to keep track of which TextBox currently has focus and you have to use that to determine which TextBox to move to "next". So, now you need to add a function that you can call on the "onfocus" JavaScript event of each TextBox. This function will indicate which TextBox has the focus so that you can determine which TextBox to move to next in the "MoveToNextText Box()" JavaScript method.


So now your JavaScript is going to look something like:

Something like (JavaScript code):
[code=JavaScript]

var textBoxWithFocu s; //<-- will hold a reference to the text box with the current focus.

function HasFocus(TextBo x)
{
textBoxWithFocu s = TextBox;
}

function MoveToNextTextB ox(e)
{
//Determining what key was pressed
var keynum;
if (window.event || e.keyCode) {
keynum = e.keyCode;
}
else if (e.which) {
keynum = e.which;
}

//checking if the key pressed was the enter key (13)
if(keynum == 13)
{
//in here "move to the next TextBox"
}

}
[/code]

And your TextBox would look something like:

<asp:TextBox ID="name" runat="server" onkeydown="MoveToNextTextBox(event)" onfocus="HasFocus(this)"></asp:TextBox>

This should get you started.

Some other things that you may be interested in that could possibly help you with your solution are:

• the document.getEle mentsBytagName( ) JavaScript method
• the addEventListene r() JavaScript method
• the .NET Page.RegisterAr rayDeclaration( ) method

-Frinny