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 the scripts and styles.
You should bubble up the non-matching keyboard presses so things like copy/paste/select all work
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.
I could do that with my eyes closed. Come on man. Learn to write some real code.
I take that back.. I just tried writing that with my eyes closed and couldn’t even spell jquery
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.
Mike: That bug is now fixed. The change is reflected in the demo and the download.
One thing you should consider implementing is supporting copy and pasting of IP addresses from the clipboard.
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!
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.
Pretty impressive, nicely done. I don’t yet have a practical use for this, but I like that it exists.
Thanks, Chris.
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
On Firefox, when using backspace to remove the last byte, the browser goes on previous page.
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.
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.
Darren: You can use this under the terms of either the MIT License or GPL – just like jQuery (http://docs.jquery.com/License).
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. )
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!
JS: Can you elaborate?
With many fields don’t want to work
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
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;
}
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;
}
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?