Click here to Skip to main content
15,672,129 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have create a web site that site has many pages and pages are many controls.
for example i have 12 controls 3 textbox 2 dropdownlistbox 2 chkbox 2 radiobutton 1 button .. user wants when he press enter key focus will be to the next control .. i found some googly but they move on textbox not on any other control using jquery....

You need to do it in pure JavaScript, because everything else would be too time-consuming.

The basics of it is this: you can focus any element by your code:[^].

See the code sample: you get a DOM element by its id and then focus it. And, to invoke it, you would need to handle the event onkeydown on each control. Of course, doing it by writing some unique id values and event handler to each and every control would be too tedious and too much of ad hoc. But first, you don't need to cover all controls by this mechanism, recursively. For this, universal action you can still use the TAB. Most likely, you only need to cover some required set of controls, for example, all controls on some form, or something like that.

Fortunately, you can use some library, such as jQuery. You can add event handler to each control during runtime, without writing event attributes in HTML text. Here is how:[^].

Likewise, you don't have to write the id in all controls. For this mechanism, you won't need IDs at all. Instead, you can do the loop by, say, all children of some parent element (such as <form>), and, for each control encountered, add an event handler and put a DOM element reference to some array. In your event handle, you will move the focus backward or forward in the array (don't forget to loop it, if you need to). This is how you can do the loop:[^].

And this is how you can you get children:[^].

So, you can get all children and traverse some code through all of them. For other traversing methods, please see:[^].

One trick is this: you will need to find out of some element can be focused or not. Apparently, you won't need to try to shift focus to some element which is not a control, or disable, or not focusable by whatever reason; you should skip non-focusable elements until you get the first one to focus on. Here is how:[^].

I think you now have all you would need. If you need to learn jQuery (highly recommended), please see:[^],[^],[^],[^],[^] (start from here).

Share this answer
Thanks7872 9-Oct-13 1:15am    
Such a wonderful answer. Great effort...+5..!
Sergey Alexandrovich Kryukov 9-Oct-13 1:18am    
Thank you, Rohan.
Hey there,

I created an example for you, you assign some specific CSS classes names to TextBoxes and other controls and you call that JavaScript function in the OnKeyDown event passing the CSSClass of next control, the function will set the focus of the control having specified CSS Class when enter key is pressed:
<asp:textbox runat="server" id="TextBox1" onkeydown="return focusOnNext(event, 'jsTxt2')" xmlns:asp="#unknown"></asp:textbox>
      <asp:textbox runat="server" id="TextBox2" onkeydown="return focusOnNext(event, 'jsTxt3')" cssclass="jsTxt2" xmlns:asp="#unknown"></asp:textbox>
      <asp:textbox runat="server" id="TextBox3" onkeydown="return focusOnNext(event, 'jsTxt4')" cssclass="jsTxt3" xmlns:asp="#unknown"></asp:textbox>
      <asp:textbox runat="server" id="TextBox4" cssclass="jsTxt4" onkeydown="return focusOnNext(event, 'jsDDL1')" xmlns:asp="#unknown"></asp:textbox>
      <asp:dropdownlist runat="server" id="DropDownList1" cssclass="jsDDL1" onkeydown="return focusOnNext(event, 'jsCHK1')" xmlns:asp="#unknown">
          <asp:listitem text="Text1" value="Value1"></asp:listitem>
          <asp:listitem text="Text2" value="Value2"></asp:listitem>
      <asp:checkbox runat="server" id="CheckBox1" cssclass="jsCHK1" text="Checkbox" xmlns:asp="#unknown" />

function focusOnNext(e, nextControl) {
            if (e.keyCode == 13) {
                $("." + nextControl).focus();
                return false;

Let me know if it helps.

Share this answer
Mohammad Nawaz 9-Oct-13 2:26am    
it doesn't work

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900