Textbox Focus基于tabindex和maxlength属性 [英] Textbox Focus based on tabindex and maxlength attributes

问题描述

在我的网络应用程序中，我在一个页面中有超过50个文本框。



只允许数字值在这些texbox内输入，并且maxlength =4。

这里我要做的是当我在文本框中键入4个数字时，然后当我键入第五个数字时，光标必须移动到下一个基于tabindex的texbox。



例如我在一个页面中有5个文本框。

对于每个texbox，我有maxlength（4）和tabindex（1-5）。

当页面加载时，焦点将在第一个texbox中，其中TabIndex =1，MaxLength =4。当我在第一个文本框中键入4个数字时，当我尝试键入第五个数字时，焦点必须在文本框2上，其中MaxLength =4TabIndex =2，第五个数字必须插入第二个文本框中。我将所有文本框放在一个面板中。



如何完成任务。



是否可以使用jquery？

 < ;   asp：TextBox     ID   =  TextBox1    
   
                             runat   =   server    
   
                             CssClass   =  txtclass < span class =code-attribute>   
   
  < span class =code-attribute>                           MaxLength   =  4    
   
                             TabIndex   =  1 >  
 <   / asp：TextBox  >  

解决方案

假设你的所有控件，设置tabindex属性

 <   div  >  
 <   asp：TextBox     ID   =  txtID1    runat   =   server    TabIndex   =  0    MaxLength   =  2 >  <   / asp：TextBox  >  
 <   / div  >  
 <   div  >  
 <   asp：TextBox  < span class =code-attribute>   ID   =  txtID2    runat   = 服务器    TabIndex   =  1    MaxLength   =  3 >  <   / asp：TextBox  >  
 <   / div  < span class =code-keyword>>  
 <   div  >  
 <   asp：TextBox     ID   =   txtID3    runat   =  server    TabIndex   =  2  MaxLength   =  2  >  <   / asp：TextBox   >  
 <   / div  >  

现在你的javascript代码如下

  
 
（ function （）{
 
 
（   input）。keypress（ function （evt）{
  var  element = 
 
 
In my web application I have more than 50 textboxes in a single page. 



Only numeric values are allowed to type inside these texboxes and have a maxlength="4". 

Here what I want to do is when I type 4 numbers in a textbox, then when i type the fifth number the cursor must move to next tabindex based texbox. 



For example I got 5 textbox in a page. 

For each texbox I have maxlength(4) and tabindex(1-5). 

When the page loads, the focus will be in first texbox, which has TabIndex="1" and MaxLength="4". When I type 4 numbers in first textbox and when I try to type the fifth number then the focus must be on textbox 2 which has MaxLength="4" TabIndex="2" and the fifth number must be inserted in second textbox. I places all my textboxes in a panel.



How can I achieve my task. 



Is it possible by using jquery ?

<asp:TextBox ID="TextBox1" 

             runat="server" 

             CssClass="txtclass" 

             MaxLength="4" 

             TabIndex="1">
</asp:TextBox>
解决方案
Assume that your all control, set tabindex property

<div>
        <asp:TextBox ID="txtID1" runat="server" TabIndex="0" MaxLength="2"></asp:TextBox>
    </div>
    <div>
        <asp:TextBox ID="txtID2" runat="server" TabIndex="1" MaxLength="3"></asp:TextBox>
    </div>
    <div>
        <asp:TextBox ID="txtID3" runat="server" TabIndex="2" MaxLength="2"></asp:TextBox>
    </div>


Now your javascript code like as follows


(function () {

("input").keypress(function (evt) {
               var element =


                        
这篇关于Textbox Focus基于tabindex和maxlength属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！