IT/WEB
특정 키 입력시 다음 input 으로 넘어가기/포커스 이동
아라니나노
2020. 4. 17. 16:32
반응형
jquery 사용
|
1
2
3
4
5
6
7
8
9
10
11
|
$('.form-control').on("keydown", function(e) {
var keyCode = e.keyCode;
console.log(e.keyCode);
if(keyCode === 39){ // Enter key
if($(this).parent().next().find('input').attr('name') === 'prdctAmt') {
$(this).parent().parent().next().find('input:eq(0)').focus();
} else {
$(this).parent().next().find('input').focus();
}
}
});
|
원하는 요소(ex. from=control 클래스를 가진 요소들) 에 keydown 이벤트 리스너를 추가
4번째 if -> keyCode 가 39번(방향키 ->) 인 경우를 찾는다
그 뒤로 8번째 줄에서 내가 이동하고 싶은 input으로 focust(); 를 주면 된다.
5번째 줄 if의 경우는 내가 사용하는 경우로 1라인의 input 이 끝나는 지점에서는 다음 라인의 input으로 이동하도록 구현해 놓은 코드
순수 javascript
|
1
2
3
4
5
6
7
8
9
10
|
var formControl = document.getElementsByClassName('form-control');
for(var i=0; i<formControl.length; i++) {
formControl[i].addEventListener('keydown', function(e){
var keyCode = e.keyCode;
console.log('pushed key ' + e.key);
if(keyCode == 39){ // Enter key
}
})
}
|
반응형