Tab to next textbox after max length value is reached. Error in Firefox

[spoonybard]

Hi Everyone,

I have an ASP.Net 2.0 C# web application that requires a user to enter in two sets of numbers. The first number is broken into 4 textboxes and the second number is broken into 2 textboxes.

The first number 4 textboxes have their max length property set to: 3, 4, 4, 3.
The second number 2 textboxes have their max length property set to: 4, 4.

The code I have works fine in IE, but does not work in Firefox. I was hoping someone can help point me in the right direction to enable my code to be cross-platform compatible. Thanks in advance and here is my code:

<script language="javascript" type="text/javascript">     
        ns4 = (document.layers)? true:false;
        ie4 = (document.all)? true:false;
        if (ns4)
           document.captureEvents(Event.KEYUP);
 
        document.onkeyup = checkLength;
 
        function checkLength(e)
        {
           if (ns4)
           {
              var key = e.which
              var el = e.target;
              var str = String(e.target);
              str = str.toLowerCase();
              if (str.indexOf('input') != -1)
                 el.tagName = "INPUT"
              else
                 return;
 
              str = str.slice(str.indexOf('maxlength'));
              str = str.slice(str.indexOf('=') + 1);
 
              if ((!isNaN(parseInt(str))) && (parseInt(str) != -1)) 
                   el.maxLength = parseInt(str);
              else 
                 el.maxLength = 2147483647;
           }
           else
           {
              var key = event.keyCode;
              var el = event.srcElement;
           }
 
           if (el.tagName == "INPUT" && key != 8)
           {
              if (el.value.length + 1 > el.maxLength) 
              {
                   var i;
                 for(i = 0; i < el.form.elements.length; i++)
                 {
                      if (el == el.form.elements[i])
                           break;
                 }
 
                 //if there is one, put the focus on the next element
                 if (i != el.form.elements.length - 1)
                 {
                      if (el.form.elements[i + 1].type != "hidden") 
                         el.form.elements[i + 1].focus();
                 }
                 else 
                 {
                      for(i = 0; i < el.form.elements.length; i++)
                      {
                         if (el.form.elements[i].type != "hidden") 
                         {
                            el.form.elements[i].focus();
                            break;
                         }
                      }
                 }
              }
           }
        }
</script>

[acoder]

Welcome to TSDN!

Argh! This is very old IE4/NS4 browser branching code.

Instead of using browser detection, test for the object, e.g. if (e) { ...

See this example.

[spoonybard]

The example you provided worked perfectly. Thank you so much for you help!

[acoder]

No problem, glad it helped. Post again if you have more questions.