250x250
Notice
Recent Posts
Recent Comments
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

진스

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

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
Comments