MLNTN

Maniacal musings of a pixel perfectionist

jQuery IP address plugin

Posted by Jared on December 30, 2009

It’s pretty tough to handle IP addresses in HTML forms. Sure, you can do have 4 separate inputs and have users tab between them. You could setup one input and validate it on the server side. You could even use a tool like Masked Input to force users to match a specific format.

But all of those solutions fall short in one way or another.

So I decided to write a jQuery plugin that would turn a plain old text input into an IP address form widget that operates like one you’d find in your operating system.

The plugin parses out existing text in the input (in case the user is editing an existing IP) and creates 4 new text inputs. As the user types the IP address, the cursor jumps to the next box. But if I left it there, it would be pretty lame, right?

The plugin also adds event handlers to the inputs to limit keys. There are also event handlers that will allow right and left arrows to jump between inputs and backspace will continue across inputs as well.

I had to write another plugin to get the cursor handling working correctly, so it’s required for the IP address plugin.

As the user is typing, if all 4 IP octets have a value, the original IP address will be repopulated with the IP address from the widget.

Check out the demo or download from Google Code (requires jquery.caret, a cursor position plugin).

44 Responses to “jQuery IP address plugin”

  1. meh says:

    You should bubble up the non-matching keyboard presses so things like copy/paste/select all work

  2. Mike McNally says:

    That’s pretty cool, but to be honest the fact that when I’ve got an octet selected I can’t type a replacement value without hitting backspace first was confusing and frustrating. Generally expected behavior from an input field is to allow highlighted text to be replaced by typing.

    Nevertheless, this is a nice plugin and you should be commended for writing and contributing useful code.

  3. Gabe says:

    I could do that with my eyes closed. Come on man. Learn to write some real code.

  4. Gabe says:

    I take that back.. I just tried writing that with my eyes closed and couldn’t even spell jquery

  5. Jared says:

    Mike: That’s a valid point. At some point, I’ll modify the plugin to handle that.

    Gabe: I hereby challenge you to an eyes-closed coding competition.

  6. Jared says:

    Mike: That bug is now fixed. The change is reflected in the demo and the download.

  7. jonnii says:

    One thing you should consider implementing is supporting copy and pasting of IP addresses from the clipboard.

  8. Steve says:

    Bug report: When I type a dot, it goes to the next box (as it should), but it actually puts the dot in the box as a character.

    Other than that, this is nice!

  9. Jared says:

    jonnii: That would be really cool. I’ll put it on the wishlist.

    Steve: Thanks for the heads-up. I broke it when I fixed Mike’s bug. Everything should be working again.

  10. Chris says:

    Pretty impressive, nicely done. I don’t yet have a practical use for this, but I like that it exists.

  11. Jared says:

    Thanks, Chris.

  12. Tony says:

    Bug report: When I type a dot or complete an octect the cursor disappears as expected, but the next octet is not highlighted. I then press a tab to move to the next octet, but instead it moves an additional octet beyond the next one. Otherwise, it’s perfect. I’m using FF 3.5.6

  13. Fabian says:

    On Firefox, when using backspace to remove the last byte, the browser goes on previous page.

  14. Jared says:

    Thanks, Tony and Fabian. Those two Firefox bugs have been fixed. Let’s just say that Firefox doesn’t like input blur events being fired if the input isn’t in focus.

  15. This is great. What’s the license? We’d like to use this in FreePBX 3 (another OS project).

    btw, it’d be awesome if this could be extended to allow IPv6 addresses.

  16. Jared says:

    Darren: You can use this under the terms of either the MIT License or GPL – just like jQuery (http://docs.jquery.com/License).

  17. Rianto Wahyudi says:

    This is awesome and I can see it will be widely used if it working properly !!
    I can’t wait till you complete the copy/paste function !
    It will be nice if the text box behave like a normal textbox ( just like Masked Input Plugin where you can double-click to select subset of the date , triple click to select everything. )

  18. JS says:

    Hi,

    This is a great plugin!
    However I think it doesn’t perform as expected when several IP textboxes are in the same form. Can someone confirm that please?

    Thanks!

  19. Jared says:

    JS: Can you elaborate?

  20. Niku says:

    With many fields don’t want to work :(

  21. Ekho says:

    minor bugfix:
    line 66
    // jump to next octet on period if this octet has a value
    if ((e.keyCode == 110 || e.keyCode == 190) && this.value.length) {
    if (next_octet.length) {
    $(this).trigger(‘blur’);
    next_octet.focus();
    }
    return false;
    }
    instead of
    // jump to next octet on period if this octet has a value
    if ((e.keyCode == 110 || e.keyCode == 190) && this.value.length) {
    if (next_octet.length) {
    $(this).trigger(‘blur’);
    next_octet.focus();
    return false;
    }
    }

    this fix prevents typing dots in the last octet

  22. Luther says:

    Hi,

    It’s pretty cool plug-in, Thanx a lot.
    In my input habit. I used to let the period char act like tab.
    And it should not be display in last field if it is empty.
    So I make some modified. FYI.
    —ORIG— Line: 66
    // jump to next octet on period if this octet has a value
    if ((e.keyCode == 110 || e.keyCode == 190) && this.value.length) {
    if (next_octet.length) {
    $(this).trigger(‘blur’);
    next_octet.focus();
    return false;
    }
    }

    —NEW—
    // jump to next octet on period if this octet has a value
    if (e.keyCode == 110 || e.keyCode == 190)
    {
    if (this.value.length)
    {
    if (next_octet.length)
    {
    $(this).trigger(‘blur’);
    next_octet.focus();
    next_octet.select();
    }
    }
    return false;
    }

  23. Vivek says:

    This one does the trick for me

    if (e.keyCode == 110 || e.keyCode == 190) {
    if ($(this).val().length) {
    if (next_octet.length) {
    next_octet.focus();
    next_octet.select();
    }
    }
    return false;
    }

  24. Vivek says:

    Hi,

    After accepting an IP address, I have a button with which I try to revert back to the old value, but even though it sets the value back, the UI doesn’t reflect it.

    Any solution for this?

  25. Gabriel says:

    Hi, congratz excellent plug-in.

    but i have a little problem when i user more than one ipfield on my form.
    if i only fill the first ipfield when i process the form the value from my first ipfield goes to my secound ipfield and the querystring show the same value to my fields but my secound ipfield its realy empty.

  26. Gabriel says:

    a think i found the problem in 112 line add this code:

    if ($this.attr(‘id’) == $(this).attr(‘id’).replace(/_octet_[1-4]$/,”))

    now its ok!

    ;-)

  27. ian says:

    Hi,

    Something strange happens when there are two controls on the same form (e.g. IP and netmask). Sometimes the same value is $_POSTed from both controls. I /think/ it’s if one hasn’t had focus before the form is submitted, but my fu is weak.

  28. Jared says:

    Gabriel and Ian:

    I’m not seeing the same bug that you guys are seeing. Check out the demo (linked in the article). I updated it for multiple instances.

  29. Jared says:

    Thanks, Vivek, Luther and Ekho. I updated the code.

  30. Jared says:

    You can grab the latest code from Google Code – link is in the article.

  31. Chad says:

    Jared, Thanks for your plugin. It’s very slick. I got the latest code but it still has a problem when two controls are on the same page. Problem is that you are binding keydown for all the controls instead of limiting it to the current control. The fix is to set the context.

    ORIGINAL:

    $(‘input.ip_octet’).bind(‘keydown’, function (e) {

    FIXED:

    $(‘input.ip_octet’, $this.next(‘.ip_container’)).bind(‘keydown’, function (e) {

  32. [...] input and validate it on the server side. You could even use a tool like Masked Input to force… [full post] Jared MLNTN javascript 0 0 0 0 0 [30 Dec 2009 [...]

  33. Appreciative User says:

    Thanks for this cool jquery control!!

    It seems to work great for me. Copy & Paste for the whole field (and not on an octet level) would be a fantastic extra feature if you or someone can do this.

    However, I am getting some cosmetic issues in IE 8 when the font size is 10pt but it looks gorgeous in Chrome and Firefox 6. :)
    See what I mean here: http://i.imgur.com/Xl7uh.png

    Any ideas on how to fix that or make them look closer to each other?

  34. Deepankar says:

    Great plugin. working very smooth. Thanks :)

  35. mariusv5 says:

    Good plugin, thanks for this work.

    How can I reset the ipaddress value ?
    I’ve tried with: $(“#myip”).ipaddress(”) but does not work.

    Any idea ???

    Thanks in advance.

  36. hex says:

    how to disabled the control?

  37. SP says:

    How can I extend it with ipv6?

  38. Jared says:

    SP: Feel free to tweak the code. It’s on Google Code – http://code.google.com/p/jquery-ip/ If you’d like to commit back, I’ll be happy to take a look when you’re done.

  39. Neo v1.0 says:

    It would be nice if each octet value is limited to 255.

  40. Jared says:

    Right, it is limited to 255.

  41. S says:

    Chad, I can confirm that your change is needed to bind the keydown event when there are multiple controls on the page. It’d be nice to see that committed to the main codebase if possible.

  42. Quoc Phien says:

    Tks Jared a lot for your plugin ^^ . It’s all i need

  43. prog says:

    very nice idaddress plugin. jared! it’s not working on IE, i mean it doesn’t change the value. if i change one octet from 192 to 182, when i press update it doesn’t show 182. but in firefox it’s working fine and also in chrome it’s working fine.

    kindly help…

  44. Adam says:

    There seems to be an issue if the textbox is within a user control and the user control is used more than once on a page.

Leave a Reply