ipAddress jquery plugin + ko binding.html

<!-- JSFiddle: http://jsfiddle.net/antishok/pDc7L/2/ -->

<input id="i" data-bind="ipAddress: ip" />
<br>
<input data-bind="value: ip">

jQuery.ipAddress ko binding.js

ko.bindingHandlers.ipAddress = {
    init: function (element, valueAccessor) {
        var el = $(element);
        var observable = valueAccessor();
        var ip = ko.utils.unwrapObservable(observable);

        el.ipAddress({ip: ip}).on('ipAddressChange', function (e) {
            observable(el.ipAddress('get'));
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            el.ipAddress("destroy");
        });
    },
    update: function (element, valueAccessor) {
        var el = $(element);
        var observable = valueAccessor();
        var ip = ko.utils.unwrapObservable(observable);
        el.ipAddress('set', ip);
    }
};


ko.applyBindings(window.v = {
    ip: ko.observable('1.22.3.44')
});

jQuery.ipAddress.css

.ipAddressNum {
    width: 28px;
}

jQuery.ipAddress.js

/* 
 * by antishok (2013)
 * basic usage:
 *   $(element).ipAddress({ip: '1.2.3.4'});  // initialization (options are optional)
 *   $(element).on('ipAddressChange', function() { console.log( $(this).ipAddress('get') });
 *   $(element).ipAddress('set', '255.5.4.3');
 *   $(element).ipAddress('destroy');
*/

(function ($) {

    var methods = {
        init: function (options) {
            options = options || {};

            return this.each(function () {
                var origInput = $(this);
                var val = (options.ip || origInput.val()).replace(/[^0-9\.]/g, '');
                var span = $('<span class="ipAddress">');

                $.each(val.split('.').slice(0, 4), function (i, num) {
                    $('<input class="ipAddressNum">').val(num).appendTo(span);
                    if (i < 3) span.append('.');
                });
                
                origInput.on('ipAddressChange.ipAddress', function(e) {
                    var el = $(this);
                    el.val( el.ipAddress('get') );
                });

                span.on('input change', 'input.ipAddressNum', function (e) {
                    var el = $(this);
                    var val = el.val();
                    
                    if (e.type === 'input' && val === '') return;

                    if (e.type === 'input' && /\./.test(val) && el.index() < 3) {
                        el.next().focus().select();
                    }

                    val = parseInt(val.replace(/[^0-9]/g, '').slice(0,3), 10) || 0;
                    if (val > 255) val = 255;
                    
                    el.val(val);
                    origInput.trigger('ipAddressChange');
                });

                span.on('click', 'input.ipAddressNum', function (e) {
                    $(this).select();
                });

                origInput.hide().after(span);
            });
        },

        destroy: function () {
            return this.each(function () {
                var origInput = $(this);
                origInput.next('.ipAddress').remove();
                origInput.off('.ipAddress').show();
            });
        },

        get: function () {
            return this.eq(0).next('.ipAddress').children('.ipAddressNum').map(function () {
                return $(this).val().replace(/[^0-9]/g, '');
            }).get().join('.');
        },

        set: function (ip) {
            return this.each(function () {
                var inputs = $(this).next('.ipAddress').children('.ipAddressNum');
                $.each(ip.replace(/[^0-9\.]/g, '').split('.').slice(0, 4), function (i, num) {
                    num = parseInt(num, 10) || 0;
                    if (num > 255) num = 255;
                    inputs.eq(i).val(num);
                });
                $(this).trigger('ipAddressChange');
            });
        }
    };

    $.fn.ipAddress = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.ipAddress');
        }
    }

})(jQuery);