因为自己工作的原因，经常会用到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)
//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实参为：
<div id="ip_box"></div>
传的实参即为id,可以通过ID获取对应值。
作者：像风一样自由2017
链接：https://www.jianshu.com/p/f14c824379e5
随时随地看视频
