IP控件

本人一直负责手头项目的基础表单可视化模块【表单定制】的开发。首先说一下，表单定制，为其它功能模块提供基础操作的表单，当业务新增时候，无需开发人员2次书写代码开发页面，而只需要在表单定制模块根据业务需求，拖拽对应的控件来制作相应的页面，然后发布即可满足实际业务需求。

表单定制控件之IP：

1 HTML

 <input name="kk" id="kk" type="text" />

2 CSS

 div.ipinput_div {
    display: inline-block;
    width : 142px;
    height : 26px;
    border-color : #86A3C4;
    border-style : solid;
    border-width : 1px;
    background-color : #ffffff;
}

input.ipinput_input {
    border-color : #b99d7f;
    border-style : solid;
    border-width : 0px;
    background-color : #ffffff;
    width : 30px;
    height : 24px;
}

span.ipinput_separator {
   border-color: #c4160f;
   border-style: solid;
   border-width: 0px;
   font-weight: bolder;
   text-align: right;
   height: 22px;
   display: inline-block;
}

3 JS

(function () {
    $.fn.ipinput = function (options) {
        // 默认属性
        var defaults =
        {
            // 长度最低支持110像素
            width: 148,
            // 高度默认20像素
            height: 26,
            // 预先存在的值
            value: ''
        }

        // 传递的参数
        var options = $.extend(defaults, options);

        // 隐藏输入框（该输入框用于存储实际值）
        var $this = $(this);
        $(this).attr({style: 'display:none'});

        // 输入控件代码
        var html = "";
        html += "<div class='ipinput_div' >";
        html += "<input type='text' id='ip1' style='ime-mode:disabled;' οnpaste='return false;'  class='ipinput_input'/>";
        html += "<span class='ipinput_separator'>.</span>";
        html += "<input type='text' id='ip2'  style='ime-mode:disabled;' οnpaste='return false;' class='ipinput_input'/>";
        html += "<span class='ipinput_separator'>.</span>";
        html += "<input type='text' id='ip3' style='ime-mode:disabled;' οnpaste='return false;' class='ipinput_input'/>";
        html += "<span class='ipinput_separator'>.</span>";
        html += "<input type='text' id='ip4'  style='ime-mode:disabled;' οnpaste='return false;' class='ipinput_input'/>";
        html += "</div>";

        // 添加输入控件代码
        $(this).parent().append(html);

        // 把原有的值赋到输入框中
        if (options.value) {
            var valArr = options.value.split(".");
            if (4 == valArr.length) {
                $('#ip1').val(valArr[0]);
                $('#ip2').val(valArr[1]);
                $('#ip3').val(valArr[2]);
                $('#ip4').val(valArr[3]);
            }
        }

        // 设置宽度和高度
        $('.ipinput_div').width(options.width);
        $('.ipinput_div').height(options.height);

        // 输入框绑定键盘按下事件，只允许输入数字
        $('.ipinput_input').keypress(function (event) {
            var keyCode = event.keyCode;
            var val = $(this).val();
            var len = val.length;
            // 限制输入数字，且最多输入3位数
            if ((keyCode >= 48 && keyCode <= 57)) {
                event.returnValue = true;
            } else {
                // 阻止默认行为
                event.returnValue = false;
                event.preventDefault();
            }
            if (len > 2) {
                event.returnValue = false;
                event.preventDefault();
            }
        });

        // 输入框绑定键盘按下弹起事件
        $('.ipinput_input').keyup(function (event) {
            var id = $(this).attr("id");
            var len = $(this).val().length;
            if (len == 3) {
                if (id == "ip1") {
                    $("#ip2").focus();
                } else if (id == "ip2") {
                    $("#ip3").focus();
                } else if (id == "ip3") {
                    $("#ip4").focus();
                }
            }
        });

        // 输入框失去焦点事件
        $('.ipinput_input').blur(function () {
            var one = $('#ipOne').val();
            var two = $('#ipTwo').val();
            var three = $('#ipThree').val();
            var four = $('#ipFour').val();

            var ip = one + "." + two + "." + three + "." + four;
            $this.val(ip);
        });
    };
})(jQuery);

4 使用方法

$("#kk").ipinput({
        value : "127.0.0.1"
  });

5 效果图