仿微软IP输入控件

因为自己工作的原因，经常会用到IP输入这样的功能，为了工作的便捷性，自己基于jQuery封装了一个防微软的IP输入控件。虽然并不完全和微软输入IP一样。但是基本完成需求。稍微有点bug,（一直按着删除键，如果开始输入时不在输入框的结尾，将无法实现全部删除）。下面是具体代码：

function ipControl(ip_box, ip, ip_one, ip_two, ip_three, ip_four, dot, dot_one, dot_two, dot_three, dot_four) {
    var html = '';
    html += '<div id="' + ip + '">';
    html += '<input type="text" id="' + ip_one + '"/>';
    html += '<input type="text" id="' + ip_two + '"/>';
    html += '<input type="text" id="' + ip_three + '"/>';
    html += '<input type="text" id="' + ip_four + '"/>';
    html += '</div>';
    html += '<div id="' + dot + '">';
    html += '<span id="' + dot_one + '">.</span>';
    html += '<span id="' + dot_two + '">.</span>';
    html += '<span id="' + dot_three + '">.</span>';
    html += '</div>';
    $('#' + ip_box).html(html);
    //设置样式

$('#' + ip_box).css({
    'display': 'inline-block',
    'width': '170px',
    'position': 'relative'
});
$('#' + ip).css({
    'width': '100%',
    'display': 'inline-block',
    'position': 'relative',
    'border': '1px solid #cccccc',
    'display': 'flex',
    'justify-content': 'space-around'
})
$('#' + ip + ' input').css({
    'width': '40px',
    'height': '20px',
    'text-align': 'center',
    'border': 'none',
    'outline': 'none'
})
$('#' + dot + ' span').css('position', 'absolute');
$('#' + dot + ' #' + dot_one).css({
    'top': '4px',
    'left': '39px'
})
$('#' + dot + ' #' + dot_two).css({
    'top': '4px',
    'left': '82px'
})
$('#' + dot + ' #' + dot_three).css({
    'top': '4px',
    'left': '126px'
})

//设置输入规则
$('#' + ip + ' input').on('input',function(){
    var itemVal = $(this).val();
    var val = Number(itemVal);
    if(isNaN(val) || val>255){
        $(this).val('');
        return false;
    }
})
var backSpaceNum = 0;
//keydown事件
$('#' + ip + ' input').on('keydown', function(event) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
    var keycode = event.keyCode ? event.keyCode : event.which;
    console.log(keycode)
    //只能输入数字以及部分功能键
    if((keycode >= 48 && keycode <= 57) || keycode == 8 || keycode == 9 || keycode == 37 || keycode == 38 || keycode == 39 || keycode == 40 || keycode == 46 || keycode == 123 || (keycode >= 96 && keycode <= 105)) {
        if(keycode == 8 && $(this).val() == '') {
            if($(this).attr('id') == ip_one) {
                return false;
            }
            $(this).prev().focus();
            if(document.selection){
                var rtextRange = $(this).prev().createTextRange();
                rtextRange.moveStart('character',$(this).prev().val().length);
                rtextRange.collapse(true);
                rtextRange.select();
            }else if(typeof $(this).prev().selectionStart=='number' && typeof $(this).prev().selectionEnd=='number'){
                $(this).prev().selectionStart = $(this).prev().val().length;
            }
        }
//Tab键
//          if(keycode == 9) {
//              var nextVal = $(this).next().val();
//              $(this).next().val('').focus().val(nextVal);
//          }
            if($(this).val().length > 2
             && keycode != 8 
             && keycode != 9 
             && keycode != 37 
             && keycode != 39 
             && keycode != 46) {
                if($(this).attr('id') == ip_four || $(this).val().length > 3) {
                    return false;
                }
                $(this).next().focus();
            }
            if($(this).val() > 255) {
                alert($(this).val() + '不是一个有效值');
                $(this).val('');
                $(this).focus();
            }
            //去掉开头0
            if($(this).val() != ''){
                var strip = $(this).val();
                $(this).val(parseInt(strip));
                if($(this).val().length<3){
                    $(this).focus();
                }
            }

    } else {
        return false;
    }

}).focus(function() {
    if(this.id == ip_four) {
        return;
    }
    this.nextElementSibling.style.imeMode = 'disabled';
});
//keyup事件
$('#'+ip+' input').on('keyup',function(event){
    var keycode = event.keyCode?event.keyCode:event.which;
    $(this).val($(this).val().replace(/[^0-9]/g,''));
    //连续输入
    if($(this).val().length>2 
    && keycode != 8 && keycode != 9 && ((keycode>=48&&keycode<=57) || (keycode>=96&&keycode<=105))){
        var nextVal = $(this).next().val();
        $(this).next().val('').focus().val(nextVal);
    }
    //不能大于255
    if($(this).val()>255){
        alert($(this).val() + '不是一个有效值');
        $(this).val('');
        $(this).focus();
    }

    //去掉开头0
    if($(this).val() != ''){
        var strip = $(this).val();
        $(this).val(parseInt(strip));
        if($(this).val().length<3){
            $(this).focus();
        }
    }
    //输入 .
    if(keycode == 110 || keycode == 190){
        nextVal = $(this).next().val();
        $(this).next().val('').focus().val(nextVal);
    }

})

//keypress事件
$('#'+ip+' input').on('keypress',function(event){
    var keycode = event.keyCode?event.keyCode:event.which;
    if((keycode>=48 && keycode <=57) || keycode == 8 || keycode == 9 || keycode == 37 || keycode == 39 || keycode == 46 || keycode == 123){
        return true;
    }else{
        return false;
    }
}).focus(function(){
    this.style.imeMode = 'disabled';
})

}

将代码直接复制在js里，并调用此函数，其中ip_box实参为：

<div id="ip_box"></div>

传的实参即为id,可以通过ID获取对应值。