ip地址输入框-- vue

做东西先理思路，是我一贯的作风。

这篇博客也是基于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动图好了。&）

后续添加功能：复制粘贴、删除后退