vue项目移动端实现ip输入框问题

vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。

要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框.

type=number类型，不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后，拿到的值为空.

解决办法：type=tel,只能输入数字，且可以获取到点字符的输入

问题：微信下keyup事件无效，回调事件中event.keyCode返回全是229.

解决办法：监听input事件，event事件对象中keycode为空，但是event.data返回输入字符，可以实现过滤.

<template>
 <div class="ipAdress">
   <ul class="ipInput" :class="{isDisabled:isDisabled}" >
     <li :key='index' v-for="(item,index) in ipAdress">
       <input :tabindex="'ipInput'+(index+1)" :class="'ipAdress'+(index+1)" @blur="blurFocus(index)" autocomplete="off" :readonly="isDisabled" maxlength="3" type="tel" pattern="[0-9]{1,3}" @input="checkIpVal(item,index,$event)" :disabled="isDisabled" @keyup="turnIpPOS(item,index,$event)" @keydown="delteIP(item,index,$event)" v-model="item.value" ref="ipInput" />
       <span v-if="index<3">.</span>
     </li>
   </ul>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       ipAdress: [{
         value: ''
       }, {
         value: ''
       }, {
         value: ''
       }, {
         value: ''
       }],
       isWX:navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"
     };
   },
   props: {
     ipStr: {
       trype: String,
       default: ''
     },
     ipType: {
       type: String
     },
     isDisabled: {
       type: Boolean,
       default: false
     },
     width: {
       type: String,
       default:'100％'
     }
   },
   watch: {
     ipStr:{
       immediate:true,
       handler:function(vall) {
         let val = vall;
         let nArr = [];
         if(val && val.includes('.') && val.length > 0) {
           let valArr = val.split('.');
           let m = valArr.length;
           for(let i = 0; i < 4; i++) {
             if(valArr[i] == 'null' || valArr[i] == 'undefined'){
               valArr[i] = '';
             }
             if(i < m) {
               nArr.push({
                 value: valArr[i]
               });
             } else {
               nArr.push({
                 value: ''
               });
             }
           }
         } else {
           nArr = [{
             value: ''
           }, {
             value: ''
           }, {
             value: ''
           }, {
             value: ''
           }];
         }
         this.ipAdress = nArr;
       }
     }
   },
   methods: {
     //methods
     blurFocus(index) {
       if(index == 3) {
         this.$emit('blur');
       }
     },
     checkIpVal(item,index,event) {
       let self = this;
       //wx
       if(this.isWX){
         let e = event || window.event;
         let keyCode = e.data;

//           //.向右跳转
         if(keyCode === ".") {
           e.preventDefault();
           e.returnValue = false;
           item.value = item.value.replace(/[^\d]/g, "").replace(/[\.]/g, "");
           if(index < 3 ) {
             self.$refs.ipInput[index + 1].focus();
           }
           return false;
         }
       }

let isNo = /^[0-9]{1,3}$/g;
       if(/[^\d]/g.test(item.value)){
         let cache = JSON.parse(JSON.stringify(self.ipAdress));
         cache[index].value = item.value.replace(/[^\d]/g, "").replace(/[\.]/g, "");
         self.ipAdress = cache;
         return false;
       }

if(item.value.replace(/[^\d]/g, "").length >= 3) {        
         let val = parseInt(item.value.replace(/[^\d]/g, ""), 10);
         if(isNaN(val)) {
           val = ''
         } else if(val > 255) {
           val = 255;
         } else {
           val = val < 0 ? 0 : val;
         }
         item.value = String(val);
         this.$set(this.ipAdress,index,item);
         if(index < 3 ) {            
           self.$refs.ipInput[index + 1].focus();                
         }
       }      
       let ns = '';
       this.ipAdress.forEach(item => ns += '.' + item.value);
       if(ns.length <= 4){
         this.$emit('getIP', "", this.ipType);
       }else{
         this.$emit('getIP', ns.slice(1), this.ipType);
       }

},
     turnIpPOS(item, index, event) {
       let self = this;
       let e = event || window.event;

if(e.keyCode == 37) {
         if(index != 0) {
           self.$refs.ipInput[index - 1].focus();
         }
       }
       //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
       if(e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 110 || e.keyCode == 46 || e.keyCode == 190 ) {
         e.preventDefault();
         e.returnValue = false;
         if(index < 3 ) {
           self.$refs.ipInput[index + 1].focus();
         }
         return false;
       }

},
     delteIP(item, index, event) {  
       let self = this;
       let e = event || window.event;

let val = parseInt(item.value.replace(/[^\d]/g, ""), 10);
       val = isNaN(val) ? '' : val;
       if(e.keyCode == 8 && index > 0 && val.length==0) {
           self.$refs.ipInput[index - 1].focus();
       }
     }
   },
   mounted(){
     console.log(this.$props)
     console.log(this.$attrs.index)
   }
 };
</script>

<style lang="scss" scoped>
 $--border-color:#ccc;
 $--outline-color:transparent;
 $--font-color:$--input-color;
 $base-font-size:12px;
 .ipInput {
   box-sizing: border-box;
   line-height: inherit;
   border: 1px solid $--border-color;
   overflow: hidden;
   border-radius: 5px;
   padding: 0;
   margin: 0;
   display: inline-block;
   vertical-align: middle;
   outline: $--outline-color;
   font-size:0;
   text-indent: 0;
   background: #fff;
   &.isDisabled {
     background: $--outline-color;

li{
       cursor:not-allowed;
       input{
         cursor:not-allowed;
       }
     }
   }
   li {
     display: inline-block;
     width:25％;
     box-sizing: border-box;
     font-size:0;
     input {
       appearance: none;
       padding:10px 5px;
       width: calc(100％ - 3px);
       text-align: center;
       outline: none;
       border: none;
       color: $--font-color;
       box-sizing: border-box;
       font-size: $base-font-size;
       &:disabled {
         background: $--outline-color;
       }
     }
     span {
       display: inline-block;
       font-size:$base-font-size;
       width: 3px;
       color: $--font-color;
     }
   }
 }
</style>

来源：https://segmentfault.com/a/1190000018559436