在C＃中按Enter键将焦点移动到网页中的下一个控件 [英] Pressing Enter Move Focus To Next Control In Web Page in C#

问题描述

先生/女士

我创建了一个网站，该网站有很多页面，页面有很多控件。

例如我有12个控件3个文本框2 dropdownlistbox 2 chkbox 2 radiobutton 1个按钮..用户想要当他按下回车键焦点将是下一个控件..我发现了一些googly但他们继续前进文本框不在任何其他控件上使用jquery ....

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

推荐答案

你需要在纯JavaScript中完成它，因为其他一切都太费时了。 />


它的基础是：您可以通过代码聚焦任何元素： http://www.w3schools.com/jsref/met_html_focus.asp [ ^ ]。



请参阅代码示例：您通过 id获取DOM元素然后关注它。并且，要调用它，您需要在每个控件上处理事件 onkeydown 。当然，通过向每个控件写一些唯一的 id 值和事件处理程序来实现它将太繁琐和过多的临时性。但首先，您不需要通过递归方式覆盖此机制的所有控件。为此，您仍然可以使用TAB进行通用操作。最有可能的是，你只需要覆盖一些必需的控件，例如，某些形式的所有控件，或类似的东西。



幸运的是，你可以使用一些库，比如jQuery。您可以在运行时向每个控件添加事件处理程序，而无需在HTML文本中编写事件属性。方法如下：

http://api.jquery.com/keydown/ [ ^ ]。



同样，您不必在所有控件中编写 id 。对于此机制，您根本不需要ID。相反，您可以通过某些父元素的所有子元素（例如< form> ）来执行循环，并且对于遇到的每个控件，添加一个事件处理程序并将DOM元素引用放到某个数组中。在事件句柄中，您将在数组中向后或向前移动焦点（如果需要，不要忘记循环它）。这就是你如何进行循环：

http://api.jquery.com/each/ [ ^ ]。



这就是你如何让孩子们： http://api.jquery.com/children/ [ ^ ]。



因此，您可以获取所有子项并遍历所有子代码。有关其他遍历方法，请参阅： http://api.jquery.com/category/traversing/ [ ^ ]。



一个技巧是：你需要找出一些可以集中或不集中的元素。显然，您不需要尝试将焦点转移到某个不是控件，禁用或无法通过任何原因聚焦的元素;你应该跳过不可聚焦的元素，直到你得到第一个要关注的元素。方法如下： http://api.jqueryui.com/focusable-selector/ [ ^ ]。



我认为你现在拥有你所需要的一切。如果您需要学习jQuery（强烈推荐），请参阅：

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/ [ ^ ]（从她开始e）。

-SA

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

嘿那里，



我为你创建了一个例子，你为TextBoxes和其他控件分配了一些特定的CSS类名，你在OnKeyDown事件中调用那个JavaScript函数传递下一个控件的CSSClass，该函数将设置焦点按下输入键时指定CSS类的控件：

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

function focusOnNext(e, nextControl) {
            alert(e.keyCode);
            if (e.keyCode == 13) {

（ 。 + nextControl）.focus（）;
return false ;
}

}

("." + nextControl).focus(); return false; } }

如果有帮助请告诉我。



Azee ......

Let me know if it helps.

Azee...

这篇关于在C＃中按Enter键将焦点移动到网页中的下一个控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！