Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Text boxes which flow into each other

    I've looked all over google but can't seem to find this out.

    How do you make it so you have 2 text boxes beside each other where you type (for example) 1 character in the first, and it flows into the next (without the need for pressing tab or whatever)

    I'm talking about the sort of thing you get when entering a software key

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I am not sure that I am correctly understanding your requirement, but try this:-

    Code:
    <input type = "text" id = "textbox1" onkeyup = "copyit()">
    <input type = "text" id = "textbox2" readonly>
    
    <script type = "text/javascript">
    function copyit() {
    var x = document.getElementById("textbox1").value;
    document.getElementById("textbox2").value= x;
    }
    </script>

    I just said that in exactly the same but different words. - Footballer interviewed on BBC Radio 4

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    No, not really. The above just copies it.


    I'll give the example. Say someone types in "B20". I want the B to be in one textbox and the 20 to be in another alongside (as they do diff functions). So when someone types the B, i want it to shift to the next box before they type 20. Does that make sense?

    Like someone said before, its just like you get in serial keys


    I've just managed it by using the charAt.n command, but i'd still be interested to know how to do the flowing text boxes
    Last edited by Thrillseeker; 08-30-2011 at 08:10 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Code:
    <html>
    <body>
    <form>
    <input name="first" size="1" onkeyup="this.form.second.focus();"/>
    <input name="second" size="5"/>
    </form>
    </body>
    </html>
    Now...what do you do if the user hits the backspace key? Without first hitting any other key? After hitting some other key?

    And do you want to insist that the first field contain only a letter?

    Give a more complete specification of what you need and we can write more complete code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    He tried to do that already. I think you know those serial number text boxes that Microsoft used to show for their product keys.

    There were like 4 text boxes, each for 4 digit key parts. So after you entered the fourth digit in the first text box the cursor automatically jumped into the second box and so forth.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Well, that wasn't what he asked. But that's easy, too:
    Code:
    <html>
    <body>
    <form>
    Enter your phone number, area code first:
    <input name="first" size="3" onkeyup="if ( this.value.length >= 3 ) this.form.second.focus();"/>
    <input name="second" size="4"onkeyup="if ( this.value.length >= 3 ) this.form.third.focus();"/>
    <input name="third" size="4" />
    </form>
    </body>
    </html>
    And of course you could easily also change it so it only accepts digits in each box.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function digits(fld,next,max)
    {
        fld.value = fld.value.replace( /\D/g, "" );
        if ( max != null && fld.value.length >= max )
        {
            next.focus();
        }
    }
    </script>
    </head>
    <body>
    <form>
    Enter your phone number, area code first:
    <input name="first" size="3" onkeyup="digits(this,this.form.second,3);"/>
    <input name="second" size="4"onkeyup="digits(this,this.form.third,3); "/>
    <input name="third" size="4" onkeyup="digits(this,this.form.fname,4);" />
    <br/><br/>
    Enter your first name: <input name="fname" />
    </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jmrker (08-31-2011)

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by Old Pedant View Post
    __________________
    Sadly, I am no longer young enough to know everything..
    With thanks to Philip M.
    I like your code and your new observation, but I would add the following:
    ...but I'm glad I'm old enough to remember my stupid mistakes!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,965
    Thanks
    79
    Thanked 4,429 Times in 4,394 Posts
    Quote Originally Posted by jmrker View Post
    I like your code and your new observation, but I would add the following:
    ...but I'm glad I'm old enough to remember my stupid mistakes!
    Well, that may fit you, but for me...

    ...and I'm senile enough to not remember when I thought I did.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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