技術標籤：demojsjshtmlhtml5

實現功能：
1.可以從左邊一直輸到右邊，
2.控制了輸入型別（只能輸入數字）
3.可以從右邊一直刪到左邊
實現思路：
1.4個input框，通過id來實現焦點變化，從而調轉到其他框；
2.通過正則來控制輸入的型別
3.通過控制鍵盤的輸入鍵序號來控制
缺陷：
左右鍵進行切換，本demo沒有實現
上程式碼：

<template>
  <div class="deployApIpLocation">
    <div class="btn_item">
      <
 
div class="btn">
        <div class="ip_box">
          <div class="item">
            <div class="title">IP地址:</div>
            <div class="IPContainer">
              <span class="ipaddr"
                >
 
<div class="IPDiv">
                  <input
                    class="IPInput"
                    id="apip-ip-addr0"
                    type="text"
                    size="3"
                    maxlength="3"
                    v-
 
model="ip.ip1"
                    @keydown="
                      inputAddrDele($event, 0, 'apip-ip-addr'),
                        inputAddr($event, 0, 'apip-ip-addr')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  <!-- @keyup="keyup($event)" -->
                  <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
                  .
                  <input
                    class="IPInput"
                    id="apip-ip-addr1"
                    type="text"
                    size="3"
                    v-model="ip.ip2"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 1, 'apip-ip-addr'),
                        inputAddr($event, 1, 'apip-ip-addr')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  .
                  <input
                    class="IPInput"
                    id="apip-ip-addr2"
                    type="text"
                    size="3"
                    v-model="ip.ip3"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 2, 'apip-ip-addr'),
                        inputAddr($event, 2, 'apip-ip-addr')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  .
                  <input
                    class="IPInput"
                    id="apip-ip-addr3"
                    type="text"
                    size="3"
                    v-model="ip.ip4"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 3, 'apip-ip-addr'),
                        inputAddr($event, 3, 'apip-ip-addr')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  /></div
              ></span>
            </div>
          </div>

          <div class="item">
            <div class="title">子網掩碼:</div>
            <div class="IPContainer">
              <span class="ipaddr"
                ><div class="IPDiv">
                  <input
                    class="IPInput"
                    id="apip-subnet-mask0"
                    type="text"
                    size="3"
                    maxlength="3"
                    v-model="mask.a1"
                    @keydown="
                      inputAddrDele($event, 0, 'apip-subnet-mask'),
                        inputAddr($event, 0, 'apip-subnet-mask')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  <!-- @keyup="keyup($event)" -->
                  <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
                  .
                  <input
                    class="IPInput"
                    id="apip-subnet-mask1"
                    type="text"
                    size="3"
                    v-model="mask.a2"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 1, 'apip-subnet-mask'),
                        inputAddr($event, 1, 'apip-subnet-mask')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  .
                  <input
                    class="IPInput"
                    id="apip-subnet-mask2"
                    type="text"
                    size="3"
                    v-model="mask.a3"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 2, 'apip-subnet-mask'),
                        inputAddr($event, 2, 'apip-subnet-mask')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  .
                  <input
                    class="IPInput"
                    id="apip-subnet-mask3"
                    type="text"
                    size="3"
                    v-model="mask.a4"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 3, 'apip-subnet-mask'),
                        inputAddr($event, 3, 'apip-subnet-mask')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  /></div
              ></span>
            </div>
          </div>
          <div class="item">
            <div class="title">預設閘道器:</div>
            <div class="IPContainer">
              <span class="ipaddr"
                ><div class="IPDiv">
                  <input
                    class="IPInput"
                    id="apip-default-gateway0"
                    type="text"
                    size="3"
                    maxlength="3"
                    v-model="gateway.a1"
                    @keydown="
                      inputAddrDele($event, 0, 'apip-default-gateway'),
                        inputAddr($event, 0, 'apip-default-gateway')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  <!-- @keyup="keyup($event)" -->
                  <!-- onkeyup="value=value.replace(/[^\d]/g,'')" -->
                  .
                  <input
                    class="IPInput"
                    id="apip-default-gateway1"
                    type="text"
                    size="3"
                    v-model="gateway.a2"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 1, 'apip-default-gateway'),
                        inputAddr($event, 1, 'apip-default-gateway')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  .
                  <input
                    class="IPInput"
                    id="apip-default-gateway2"
                    type="text"
                    size="3"
                    v-model="gateway.a3"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 2, 'apip-default-gateway'),
                        inputAddr($event, 2, 'apip-default-gateway')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  />
                  .
                  <input
                    class="IPInput"
                    id="apip-default-gateway3"
                    type="text"
                    size="3"
                    v-model="gateway.a4"
                    maxlength="3"
                    @keydown="
                      inputAddrDele($event, 3, 'apip-default-gateway'),
                        inputAddr($event, 3, 'apip-default-gateway')
                    "
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                  /></div
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ip: {
        ip1: 0,
        ip2: 0,
        ip3: 0,
        ip4: 0,
      },
      gateway: {
        a1: 0,
        a2: 0,
        a3: 0,
        a4: 0,
      },
      mask: {
        a1: 0,
        a2: 0,
        a3: 0,
        a4: 0,
      },
      module_addr: 0,
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    inputAddrDele(e, a, b) {
      // console.log(b);
      var keynum = window.event ? e.keyCode : e.which;
      // console.log(keynum);
      if (keynum == 8 || keynum == 46) {
        for (let i = 4; i > 0; i--) {
          if (i == a) {
            // console.log(a);
            // var input = $("[name='apip-ip-addr" + a + "']").val();
            var input = document.getElementById(b + a).value;
            // console.log(input);
            if (input.length < 1) {
              // $("[name='apip-ip-addr" + (a - 1) + "']").focus();
              // document.getElementById(b + a).textContent = "";
              document.getElementById(b + (a - 1)).focus();
            }
          }
        }
      }
    },
    inputAddr(e, a, b) {
      var keynum = window.event ? e.keyCode : e.which;
      if (
        keynum == 229 ||
        keynum == 48 ||
        keynum == 49 ||
        keynum == 50 ||
        keynum == 51 ||
        keynum == 52 ||
        keynum == 53 ||
        keynum == 54 ||
        keynum == 55 ||
        keynum == 56 ||
        keynum == 57 ||
        keynum == 96 ||
        keynum == 97 ||
        keynum == 98 ||
        keynum == 99 ||
        keynum == 100 ||
        keynum == 101 ||
        keynum == 102 ||
        keynum == 103 ||
        keynum == 104 ||
        keynum == 105
      ) {
        for (let i = 0; i < 4; i++) {
          if (i == a) {
            var input = document.getElementById(b + a).value;
            // var input = $("[name='apip-ip-addr" + a + "']").val();
            if (input.length > 2) {
              // $("[name='apip-ip-addr" + (a + 1) + "']").focus();
              if (i == 3) {
                return;
              }
              document.getElementById(b + (a + 1)).focus();
            }
          }
        }
      }
    },
  },
};
</script>

<style lang="scss">
.deployApIpLocation {
  .btn_item {
    display: flex;
    justify-self: start;
  }
  .btn {
    display: flex;
    line-height: 3.5rem;
    width: 40rem;
    margin: 1rem 0;
    .title {
      width: 6rem;
    }
    .input {
      margin: 0 1rem;
    }
  }
  .ip_box {
    display: flex;
    .item {
      width: 25rem;
      display: flex;
      line-height: 3.5rem;
      font-size: 1.4rem;
      .title {
        width: 7rem;
      }
      .IPContainer {
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 35px;
        line-height: 35px;
        outline: 0;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        widows: 10rem;
        .div.IPDiv {
          background: #ffffff;
          width: 160px;
          font-size: 9pt;
          border: 1px solid #808080;
          line-height: 32px;
          display: inline-block;
        }
        input.IPInput {
          width: 24px;
          font-size: 10pt;
          text-align: center;
          border-width: 0;
        }
      }
    }
  }
}
</style>