输入框输入IPv4、子网掩码格式(子网掩码输入3个数字自动跳转下一个输入框)

最新推荐文章于 2022-10-07 15:42:39 发布

渣渣灰飞

最新推荐文章于 2022-10-07 15:42:39 发布

阅读量523

点赞数

本文链接：https://blog.csdn.net/flhhly/article/details/118526907

版权

效果图

四个input联用

ipv4格式

html

<div class="input">
                    <a-row type="flex" justify="start">
                      <a-space>
                        <a-col :span="2"
                          ><a-space
                            ><a-input
                              ref="ip1"
                              v-model="ip.ip1"
                              @input="searchip1"
                              style="width: 50px"
                              :maxLength="3"
                            ></a-input
                            ><span>.</span></a-space
                          ></a-col
                        >
                        <a-col :span="2"
                          ><a-space
                            ><a-input
                              ref="ip2"
                              v-model="ip.ip2"
                              @input="searchip2"
                              style="width: 50px"
                              :maxLength="3"
                            ></a-input
                            ><span>.</span></a-space
                          ></a-col
                        >
                        <a-col :span="2"
                          ><a-space
                            ><a-input
                              ref="ip3"
                              v-model="ip.ip3"
                              @input="searchip3"
                              style="width: 50px"
                              :maxLength="3"
                            ></a-input
                            ><span>.</span></a-space
                          ></a-col
                        >
                        <a-col :span="2"><a-input ref="ip4" v-model="ip.ip4" :maxLength="3"></a-input></a-col> </a-space
                    ></a-row>
                  </div>

<script>
export default {
  data() {
return{
    ip: {
        ip1: null,
        ip2: null,
        ip3: null,
        ip4: null,
      },
      mask: {
        a1: 255,
        a2: 255,
        a3: 255,
        a4: '',
      },

}
}
methods: {
    //指定核心设备输入自动跳转
    searchip1() {
      var value = this.ip.ip1.length
      if (value == '3') {
        this.$refs.ip2.focus()
      }
    },
    searchip2() {
      var value = this.ip.ip2.length
      if (value == '3') {
        this.$refs.ip3.focus()
      }
    },
    searchip3() {
      var value = this.ip.ip3.length
      if (value == '3') {
        this.$refs.ip4.focus()
      }
    },
}
}
</script>