Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET C#4.0
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>
Posted 21-Feb-13 1:24am
shamjid1.5K
v3
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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 = $(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();
                   }
               }
           });
       });
  Permalink  
v5
Comments
shamjid at 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 at 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 at 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 at 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 at 22-Feb-13 4:41am
   
@Ahasan:-Its working fine..Thanks a lot...My 5 for u..
S. M. Ahasan Habib at 22-Feb-13 4:48am
   
you are most welcome.
shamjid at 25-Feb-13 6:39am
   
@Ahasan:-
please check below link
 
http://www.codeproject.com/Questions/536892/HowplusToplusaddplustimeplusinplushr-3amin-3aSecpl
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Try using TextChange Event,
In that check the length of text
if txt.Lenth>4
Increase ta increase
  Permalink  
Comments
shamjid at 21-Feb-13 7:35am
   
@vardhan:-There is morethan 50 textbox in a single page...?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

Hi please follow this code
 
<asp:textbox id="TextBox1" runat="server" onkeypress="setFocus();" xmlns:asp="#unknown" />
    <asp:textbox id="TextBox2" runat="server" xmlns:asp="#unknown" />
function setFocus() {
            var txtBox1 = document.getElementById('<%=TextBox1.ClientID %>');
            if (txtBox1.value.length == 4) {
                document.getElementById('<%=TextBox2.ClientID %>').focus();
            }
        }
  Permalink  

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 7,442
1 OriginalGriff 5,996
2 Peter Leow 4,292
3 CHill60 2,858
4 Mika Wendelius 2,850


Advertise | Privacy | Mobile
Web04 | 2.8.150224.1 | Last Updated 22 Feb 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100