做东西先理思路，是我一贯的作风。
这篇博客也是基于vue来写的，因为最近用vue写的多了，就顺手用了他，但是写东西主要是思路，有了思路即便是用别的框架，哪怕是原生，你也会轻而易举地完成它。
思路
- 样式
- 4个input合成一个输入框
- 3个div弄成小点定位到input上
- 逻辑
- 校验ip值：每个input里只能输入数值，且数值大小为0-255
- 按下箭头左会跳转到前一个input，当backspace把数值删完后也会向前一个input跳转
- 按下箭头右、空格、enter键、冒号会向下一个input跳转
- 防止用户输入空值，当input失去焦点时，自动赋值为0
代码
- html
<ul class="ipAdress">
<li v-for="(item,index) in ipAdress">
<input type="text" @input="checkIpVal(item,index)" @keyup="turnIpPOS(item,index,$event)" v-model:value="item.value" ref="ipInput" @blur="setDefaultVal(item)" />
<div></div>
</li>
</ul>
- css
.ipAdress{
display: flex;
align-items: center;
border: 1px solid #0190FE;
width: 148px;
margin-right: 10px;
}
.ipAdress li{
position: relative;
height: 23px;
margin: 0;
}
ul[class="ipAdress"] input[type="text"]{
border: none;
width: 100%;
height: 23px;
text-align: center;
background: transparent;
color: #efefef;
}
.ipAdress li div{
position: absolute;
bottom: 2px;
right: 0;
border-radius: 50%;
background: #0190FE;
width: 2px;
height: 2px;
}
/*只需要3个div*/
.ipAdress li:last-child div{
display: none;
}
/*取消掉默认的input focus状态*/
.ipAdress input:focus{
outline: none;
}
- js
这里分两个模块，一个是data，一个methods。虽然不是什么难点，但是两个都列举出来就会比较清晰。
//data
ipAdress: [{
value: ''
}, {
value: ''
}, {
value: ''
}, {
value: ''
}]
//methods
checkIpVal(item, index) {
let self = this;
//确保每个值都处于0-255
let val = item.value;
//当输入的是空格时，值赋为空
val = val.trim();
val = parseInt(val, 10);
if(isNaN(val)) {
val = ''
} else {
val = val < 0 ? 0 : val;
val = val > 255 ? 255 : val;
}
item.value = val;
},
turnIpPOS(index, event) {
let self = this;
let e = event || window.event;
//左箭头向左跳转，左一不做任何措施
if(e.keyCode == 37) {
if(index == 0) {} else {
self.$refs.ipInput[index - 1].focus();
}
}
//删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
if(e.keyCode == 8) {
let val = item.value;
if(index == 0) {} else {
self.$refs.ipInput[index - 1].focus();
}
}
//右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
if(e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190) {
if(index == 3) {} else {
self.$refs.ipInput[index + 1].focus();
}
}
},
setDefaultVal(item) {
//当input失去焦点，而ip没有赋值时，会自动赋值为0
let self = this;
let val = item.value;
if(val == '') {
item.value = '0';
}
},
最后完成的东西就是这样：
ipAdress input
等下次学了gif录制，就直接放个gif动图好了。&）
后续添加功能：复制粘贴、删除后退
