Click here to Skip to main content
15,868,014 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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 ?
HTML
<asp:TextBox ID="TextBox1" 
             runat="server" 
             CssClass="txtclass" 
             MaxLength="4" 
             TabIndex="1">
</asp:TextBox>
Posted
v3

Assume that your all control, set tabindex property
XML
<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
JavaScript
$(function () {
           $("input").keypress(function (evt) {
               var element = $(evt.target);
               var tabIndex = element.attr('tabIndex');
               var input = element.val();
               var maxLength = element.attr("maxLength");
               var inputLength = input.length;
               var charCode = (evt.which) ? evt.which : evt.keyCode;
               if (8 == charCode)
                   return true;

               if (inputLength+1 == maxLength) {
                   var nextElement = $("input[tabIndex=" + (parseInt(tabIndex) + 1) + "]");
                   if (nextElement) {
                       nextElement.focus();
                   }
               }
           });
       });
 
Share this answer
 
v5
Comments
shamjid 22-Feb-13 0:46am    
@Ahasan:-Once again thanks bhai...Did u check this code..Is it working for u...For me its not working..Any correction needed..
S. M. Ahasan Habib 22-Feb-13 0:54am    
One thing i corrected that is (typeo) evt instead of event. Now try again. Just make sure that markup(html) attribute is you assigned. What type of error you found?First check it to firefox. Then go for other browser as well.
shamjid 22-Feb-13 1:38am    
@Ahasan:-its not showing any error message..but no javascript effect...

<script type="text/javascript">
$(function () {
$("input").keypress(function (evt) {
var element = $(evt.target);
var tabIndex = element.attr('tabIndex');
var input = element.val();
var maxLength = element.attr("maxLength");
var inputLength = input.length;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (8 == charCode)
return true;

if (inputLength+1 == maxLength) {
var nextElement = $("input[tabIndex=" + (tabIndex + 1) + "]");
if (nextElement) {
window.setTimeout(function(){ nextElement.focus()}, 100);
}
}
});
});
</script>

<table class="style1">
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server" TabIndex="1" MaxLength="2" >
 <asp:TextBox ID="TextBox2" runat="server" TabIndex="2" MaxLength="2">
 <asp:TextBox ID="TextBox3" runat="server" TabIndex="4" MaxLength="3">
</td>
<td>
<asp:TextBox ID="TextBox4" runat="server" TabIndex="3" MaxLength="2">
</td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
</table>


my textboxes are in a table..
S. M. Ahasan Habib 22-Feb-13 4:15am    
one minor bug was there. tabIndex datatype was string. When use tabIndex + 1 it actually concate 2 strings. I update that with parseInt(tabIndex) + 1 and fix the issue. Just one thing remember that when you assign tabIndex you start from 1 and it should be cronological order. Like 1, 2, 3 etc. In your code i see 1,2,4. You just change that and rerun your code.
shamjid 22-Feb-13 4:41am    
@Ahasan:-Its working fine..Thanks a lot...My 5 for u..
Try using TextChange Event,
In that check the length of text
if txt.Lenth>4
Increase ta increase
 
Share this answer
 
Comments
shamjid 21-Feb-13 7:35am    
@vardhan:-There is morethan 50 textbox in a single page...?
Hi please follow this code

ASP.NET
<asp:textbox id="TextBox1" runat="server" onkeypress="setFocus();" xmlns:asp="#unknown" />
    <asp:textbox id="TextBox2" runat="server" xmlns:asp="#unknown" />

JavaScript
function setFocus() {
            var txtBox1 = document.getElementById('<%=TextBox1.ClientID %>');
            if (txtBox1.value.length == 4) {
                document.getElementById('<%=TextBox2.ClientID %>').focus();
            }
        }
 
Share this answer
 

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