仿微软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 += '

';

html += '';

html += '';

html += '';

html += '';

html += '

';

html += '

';

html += '.';

html += '.';

html += '.';

html += '

';

$('#' + 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)

//onkeypress事件触发时%的ASCII码为37,和此事件的左方向键冲突,当输入%时阻止onkeypress事件;

// if(keycode == 37) {

// event.preventDefault();

// }

//只能输入数字以及部分功能键

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实参为:

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

你可能感兴趣的:(仿微软IP输入控件)