SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question HTML/Javascript jump to next field

    Hi guys

    I'll be perfectly honest with you all and admit that I don't know much about JS, but I have this little script:

    Code:
        <script type="text/JavaScript">
        function valid(f) {
            if (!/^\d*$/.test(f.value)) {
                f.value = f.value.replace(/[^\d]/g,"");
            }
        }
        </script>
    I use that with onkeyup="valid(this)" in a form to verify that only numbers have been typed in to the field. In this particular case I'm typing in IP addresses. I've seen some code that will automatically jump to the next field when the field is filled (ie three numbers) but I want to be able to jump when a period (.) is typed, so if you were to actually type an IP address, say 127.0.0.1 all four boxes would fill out as they should. How I do that is where I'm stuck at. Any help would be very gratefully received, and if you can merge in the ability to get the cursor to move to the next field when three numbers have been entered too that would be great.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Antnee,

    Here you go:

    - Moves to next box when a period is typed (.)
    - Moves to previous box if backspace key is pressed and current box is empty
    - Will work if data is not entered using a keyboard.

    Edit:


    New version at #4


    The HTML:

    Code html4strict:
    <div id="ip-address">
        <input name="part-1" />
        <input name="part-2" />
        <input name="part-3" />
        <input name="part-4" />
    </div>

    javascript:

    Code JavaScript:
    (function(){
        var ipContainer = document.getElementById('ip-address'),
            inputs = ipContainer.getElementsByTagName('input'),
            inputsLength = inputs.length;
        while(inputsLength--) {
            inputs[inputsLength].onkeyup = (function(i){
                return function(){
                    if (!/^(\d|\.)*$/.test(this.value)) {
                        this.value = this.value.replace(/[^\d]/g,"");
                    } else {
                        if (this.value.length>3) {
                            if (inputs[i+1]) {
                                inputs[i+1].focus();
                                inputs[i+1].value = this.value.replace(/\./g,'').substr(3);
                            }
                            this.value = this.value.substr(0,3);
                        } else {
                            if (this.value.substr(this.value.length-1)==='.') {
                                this.value = this.value.substr(0,this.value.length-1);
                                if (inputs[i+1]) {
                                    inputs[i+1].focus();
                                }
                            }
                        }
                    }
                }
            })(inputsLength);
            inputs[inputsLength].onkeydown = (function(i){
                return function(e){
                    var keycode = window.event ? window.event.keyCode : e.which;
                    if (!this.value.length && keycode === 8) {
                        if(inputs[i-1]) {
                            inputs[i-1].focus();
                        }
                    }
                }
            })(inputsLength);
            inputs[inputsLength].onblur = function(){
                this.value = this.value.replace(/[^\d]/g,'').substr(0,3);
            }
        }
    })();

    Make sure you only run the script when the document has loaded (when the DOM is ready). My suggestion is to put it the entire script into an external file and link to it just before the END body tag of your document:

    Code html4strict:
     
         ... PAGE CONTENT ...
     
         <script src="ip-address-script.js"></script>
     
    </body>
    Last edited by JimmyP; Dec 8, 2008 at 07:08.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    James, thanks a lot for that, that looks brilliant and I'll look at it properly when I get home from work later. One question though; how critical are the DIV ID and input names? The reason I ask is that there may be a list of fields, rather than just one set. Basically the page is where I can enter IP addresses to allow/block to any particular page on my site. Think of it like selective banning per page, per IP. Normally it would be done only to allow a particular IP to something like the admin panel, but I may leave a couple of IP ranges in there so I end up with a line with the start IP and then the end IP for the range, and then another below, and another, and another, followed by one last one for adding a new range. Not sure that exactly makes sense, but what I'm getting at is "will that script work when there are multiple IP fields on the page?"

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I've updated the script so that it works with multiple sets of input fields.

    You can see it in action here: http://qd9.co.uk/sp/js/IP-Address-Fields/
    You can download the script here: http://qd9.co.uk/sp/js/IP-Address-Fields/ipaddress.js
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There are a couple (oh okay, 3 then) usability issues that I found with a quick test.

    1. I can't paste an ip address into the first field and have it automatically fill the rest of them in for me.
    2. I can't shift-tab back to a previous filled-in field
    3. When I correct a field, it automatically clears the next field, when there was something in there already. Aargh!
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for pointing those issues out Paul!

    1. I can't paste an ip address into the first field and have it automatically fill the rest of them in for me. FIXED.
    2. I can't shift-tab back to a previous filled-in field. FIXED.
    3. When I correct a field, it automatically clears the next field, when there was something in there already. Aargh! FIXED.


    Edit:


    Same links as before:
    You can see it in action here: http://qd9.co.uk/sp/js/IP-Address-Fields/
    You can download the script here: http://qd9.co.uk/sp/js/IP-Address-Fields/ipaddress.js
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Hurrah! Thanks Jimmy. I'll be sure to use this more often now.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Jimmy, that is awesome, thank you so much!

  9. #9
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have one more question if I may? I try to verify as many ways as possible, and one of the ways that I was working was by setting the input maxlength to 3 characters. I didn't want to allow anyone to type any further and didn't want to assume JS was enabled on the other side. However, with a maxlength set it is not possible to paste in the whole IP address and have the fields all filled in. Is there a way around it, or will I just have to decide on pasting the whole lot OR having maxlength?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You will need to have javascript enabled to allow the behavioural improvements to be applied to the user interface for the benefit of easier form entry.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I know that, but from my perspective, as a strictly functional web designer, I don't like to assume that the client has anything in particular beyond a web browser. So, I do so much checking on the client side, and so much on the server side, but as a matter of course you should ALWAYS set a max-length on any input that matches that of the database that you are entering data in to. If the client has JavaScript disabled for some reason then he/she cannot pass IP addresses that are too long. Likewise, when posted, the fields should be checked again by the server, just in case. So as far as I'm concerned I should have the following:

    1) A maxlength set per input
    2) JS validation
    3) Server side validation

    It's just good practice. Practice that I cannot perform in this case, which is a shame. I want to do it, but I have to make the choice between the fancy (and excellent) JS that Jimmy has written, or the more traditional and less practical non-JS version which puts all the checking on the server side. Which reminds me, you can add IP addresses with each figure being over 255 which ought to really be included if you want to be 100&#37; thorough

  12. #12
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about adding the maxLength, as you suggest, to the HTML and then removing it with JavaScript?

    Code JavaScript:
    inputs[thisInputIndex].removeAttribute('maxlength');
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  13. #13
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    702
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ooh, that's perfect, I didn't know you could do that. Once again Jimmy, brilliant!


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
  •