Pressing Enter Move Focus To Next Control In Web Page in C#

Question

0.00/5 (No votes)

See more:

Sir/Madam
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....

Posted 8-Oct-13 9:34am

Mohammad Nawaz

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sergey Alexandrovich Kryukov · Answer 1 · 2013-10-08T10:33:00

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: http://www.w3schools.com/jsref/met_html_focus.asp[^].

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:
http://api.jquery.com/keydown/[^].

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:
http://api.jquery.com/each/[^].

And this is how you can you get children: http://api.jquery.com/children/[^].

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

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: http://api.jqueryui.com/focusable-selector/[^].

I think you now have all you would need. If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^],
http://learn.jquery.com/[^],
http://learn.jquery.com/using-jquery-core/[^],
http://learn.jquery.com/about-jquery/how-jquery-works/[^] (start from here).

—SA

**Azee** · Answer 2 · 2013-10-08T19:57:00

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.NET

<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:dropdownlist>
      <asp:checkbox runat="server" id="CheckBox1" cssclass="jsCHK1" text="Checkbox" xmlns:asp="#unknown" />

JavaScript

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

Let me know if it helps.

Azee...

Pressing Enter Move Focus To Next Control In Web Page in C#

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0