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

最新推荐文章于 2024-12-21 11:21:16 发布

原创最新推荐文章于 2024-12-21 11:21:16 发布 · 608 阅读

1 ·

CC 4.0 BY-SA版权

这篇博客介绍了一个使用Vue.js编写的IPv4输入框组件，通过四个输入框分别输入IP地址的四部分，并自动跳转焦点到下一个输入框。组件限制每个部分输入的字符数，并提供了相应的JS代码实现焦点转移功能。

效果图

四个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>