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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。