SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Text Box Code?

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Location
    Cleveland, Ohio
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Box Code?

    Do you know the code to allow a person to type something into a text box and once the number of characters is up it moves it automatically to the next text box.

    If i find an example i'll post it. but ive googled it and i just can't think of what its called. so i can't find the code i need

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You need a bit of JavaScript to do that. It's not something HTML alone gives you.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    <html>
    <head>
    <script type='text/javascript'>
    var count = 0;
    function count_move(which) {
    	count++;
    	if(count == 5) {
    		document.getElementById(which).focus();
    		count = 0;
    	}
    }
    </script>
    </head>
    <body>
    <form name="myform">
    <input type="text" id="t1" name="t1" onkeyup="count_move('t2');">
    <input type="text" id="t2" name="t2" onkeyup="count_move('t3');">
    <input type="text" id="t3" name="t3" onkeyup="count_move('t4');">
    </form>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is better:
    Code:
    <html>
    <head>
    <script type='text/javascript'>
    function count_move(y, which) {
    	var x = document.getElementById(y).value.length;
    	if(x == 5) {
    		document.getElementById(which).focus();
    	}
    }
    </script>
    </head>
    <body>
    <form name="myform" id="myform">
    <input type="text" id="t1" name="t1" onkeyup="count_move('t1', 't2');">
    <input type="text" id="t2" name="t2" onkeyup="count_move('t2', 't3');">
    <input type="text" id="t3" name="t3" onkeyup="count_move('t3', 't4');">
    </form>
    </body>
    </html>

  5. #5
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This example will also need the maxumin length of the text area set so that a user cannot go back to the field after being tabbed away and add more characters.

    And since you have to do this anyway, make the script more versatile by changing the x==5 line to :
    if (x == document.getElementById(y).maxLength) {

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Location
    Cleveland, Ohio
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys. This works great.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •