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.