진스
안드로이드 키패드에서 자동으로 다음 input을 찾아 focus 이동 하기 본문
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
'Vue' 카테고리의 다른 글
vue.js - vue cli 프로젝트 생성(feat. vue create 안될때 필독) (0) | 2021.09.06 |
---|---|
모달팝업(modal)에 스크롤 및 포커스(focus) 처리하기 (0) | 2021.08.25 |
vue 룰렛 (0) | 2021.07.02 |
img 태그의 src 바인딩 , background 하는 방법 (0) | 2021.07.02 |
vue에서 (camelcase)카멜케이스 켜는 방법 (0) | 2021.06.17 |
Comments