I need a JQuery IP Mask plugin

Question

Is there a good IP Mask plugin for JQuery? I\'ve tried Masked Input Plugin but it doesn\'t IP Addresses with less than 12 digits. Then I\'ve tried meioMask and this doesn\'t wor

Answer 1

This is an older post however for someone who wants an easy way to manipulate multiple inputs, without using a bulking plugin, or having to worry about documentation or methods, here's a simple class selector method that does it all for you. Its IPv4 only but it sounds like your needs are pretty simple.

//jQuery 1.9+ selector pattern,
//To get working with an older version
//Swap first line to $(".ip").bind('keydown',function(e){
//To get working with jQuery versions support .live
//$(".ip").live('keydown',function(e){
$(document).on('keydown',".ip",function(e){
    var code = e.keyCode || e.which;
    var sections = $(this).val().split('.');
    //Only check last section!
    var isInt       = ((code >= 48 && code <= 57) || (code >= 96 && code <= 105));
    var hasSlash    = $(this).val().indexOf("/") == -1;
    if(isInt){
        if(hasSlash){
            if(sections.length < 4){
                //We can add another octet
                var val = parseInt(sections[sections.length-1]+String.fromCharCode(code));
                if(val > 255 || parseInt(sections[sections.length-1]) == 0){
                    $(this).val($(this).val()+"."+String.fromCharCode(code));
                    return false;
                }
                return true;
            } else {
                //Lets prevent string manipulations, our string is long enough
                var val = parseInt(sections[sections.length-1]+String.fromCharCode(code));
                if(val > 255 || parseInt(sections[sections.length-1]) == 0){
                    return false;
                }
                return true;
            }
        } else {
            var cidr_split = $(this).val().split('/');
            var target_val = parseInt(cidr_split[1]+String.fromCharCode(code));
            return (target_val < 33 && target_val.toString().length < 3 && parseInt(cidr_split[1]) != 0);
        }
    } else if(code == 191){
        //CIDR Slash
        return ($(this).val().indexOf("/") == -1);
    } else if(code == 8 || code == 46 || code == 9 || code == 13){
        return true;
    }
    return false
});

To break this down for understanding, you bind the class "ip" in your input, it will handle the rest automatically :D This version supports CIDR notation (eg: 192.168.1.1/16) it only allows valid addresses to be input, to remove CIDR function you can use use the following snippet (not tested)

//jQuery 1.9+ selector pattern,
//To get working with an older version
//Swap first line to $(".ip").bind('keydown',function(e){
//To get working with jQuery versions support .live
//$(".ip").live('keydown',function(e){
$(document).on('keydown',".ip",function(e){
    var code = e.keyCode || e.which;
    var sections = $(this).val().split('.');
    //Only check last section!
    var isInt       = ((code >= 48 && code <= 57) || (code >= 96 && code <= 105));
    if(isInt){
        if(sections.length < 4){
            //We can add another octet
            var val = parseInt(sections[sections.length-1]+String.fromCharCode(code));
            if(val > 255 || parseInt(sections[sections.length-1]) == 0){
                $(this).val($(this).val()+"."+String.fromCharCode(code));
                return false;
            }
            return true;
        } else {
            //Lets prevent string manipulations, our string is long enough
            var val = parseInt(sections[sections.length-1]+String.fromCharCode(code));
            if(val > 255 || parseInt(sections[sections.length-1]) == 0){
                return false;
            }
            return true;
        }
    } else if(code == 8 || code == 46 || code == 9 || code == 13){
        return true;
    }
    return false
});

I am providing the code here for two purposes 1) This is something i believe needs to be addressed, 2) i hope to contribute to the world

The snippet is not designed to be pulled apart, nor support IPv6, if you need IPv6 Support please see https://code.google.com/p/jquery-input-ip-address-control/ that anyulled suggested.

But aside from the complex syntax, it breaks the octets apart, and only checks the "active" octet, it supports any VALID address (0.0.0.0, 0.0.0.0/0, ect) so use wisely it does not do any fancy checking other than preventing invalid input. If you're looking for a checker, please see Santiago Elvira Ramirez's post about the IP Address validator.