[学习笔记]vue input输入框输满或清空自动切换下/上一个输入框

应用场景：一般使用在输入生日、银行卡信息等场景。

效果图：

html： 

          <input
            type="text"
            placeholder="1980"
            @keyup="nextinput"   //键盘输入弹起触发事件
            @keyup.delete="backspace"  //删除触发事件
            maxlength="4"
            v-model="userinfo.birthday.year"
            class="year"
            ref="year"
          /><span>年</span
          ><input
            type="text"
            placeholder="01"
            @keyup="nextinput"
            @keyup.delete="backspace"
            maxlength="2"
            v-model="userinfo.birthday.month"
            class="month"
            ref="month"
          /><span>月</span
          ><input
            type="text"
            placeholder="02"
            @keyup="nextinput"
            @keyup.delete="backspace"
            maxlength="2"
            v-model="userinfo.birthday.day"
            class="day"
            ref="day"
          /><span>日</span>

js：

    nextinput(e) {
      if (e.target.value.length == 4) {          //年份输入框若输满4个数字
        if (e.target.className == "year") {       
          this.$refs.month.focus();              //月输入框获取焦点
        }
      } else if (e.target.value.length == 2) {   //月份输入框若输满2个数字
        if (e.target.className == "month") {
          this.$refs.day.focus();                //日输入框获取焦点
        }
      }
    },

    backspace(e) {
      if (e.target.value == "") {
        if (e.target.className == "month") {
          this.$refs.year.focus();
        } else if (e.target.className == "day") {
          this.$refs.month.focus();
        }
      }
    },