Vue

안드로이드 키패드에서 자동으로 다음 input을 찾아 focus 이동 하기

입방정 2021. 8. 11. 15:21
728x90

 

<form> <!-- 폼으로 감싸야 다음이 나옴-->
<div class="form_box">  <!--이 태그의 input을 셀렉-->
        <p class="tit">
          외국인 이신가요?
        </p>
        <div class="radio_group_box col2">
          <div class="radio_box">
            <input
              id="radio10"
              type="radio"
              name="radioName10"
              checked="checked"
            >
            <label for="radio10">내국인</label>
          </div>
          <div class="radio_box">
            <input
              id="radio11"
              type="radio"
              name="radioName10"
            >
            <label for="radio11">외국인</label>
          </div>
        </div>
      </div>
 <div class="form_box"> <!--이 태그의 input을 셀렉-->
        <!-- 에러 시 error 클래스 추가 -->
        <p class="tit">
          생년월일을 입력해주세요.<em>(예: 19990101)</em>
        </p>
        <div class="input_box">
          <input
            id="birthday00"
            type="tel"
            value=""
            @input="$commonLib.inputLabelSet($event)"
            ref="birthday00"
            @keypress="nextPass($event)"
          >
          <label for="birthday00"><span class="in_box">법정생년월일 8자리</span></label>
        </div>
        <!-- validation 문구 -->
        <p class="error_txt">
          생년월일을 입력해주세요.
          <!-- 생년월일을 정확히 입력해주세요. -->
        </p>
      </div>
      </form>
methods: {
     nextPass(event){
      var fb= document.querySelectorAll('.form_box input')
      var fbl= document.querySelectorAll('.form_box input').length
      const idx = Array.from(document.querySelectorAll('.form_box input')).indexOf(event.target);
      if(event.charCode == 13 && /Android/.test(navigator.userAgent)){
            if(idx==(fbl-1)){
                // console.log(idx);
            }else{
            fb[idx+1].focus();
            }
        }
    }
  }
728x90