Javascript
키보드의 방향키로 목록 이동하여 목록값 선택 하기
wilson
2023. 1. 6. 13:41
반응형
$(document).keyup(function (e) {
//console.log("e.keyCode--", e.keyCode)
// e.keyCode = 40 : 방향키 아래
// e.keyCode = 38 : 방향키 위
//imageView 레이어 팝업에 'visible' class 값이 있으다면
if($("#imageView").hasClass("visible") === true) {
// 키보드 방향키 위, 아래 값이 들어올때
if(e.keyCode == 40 || e.keyCode == 38){
// imageList 목록에 데이터값(li) 이 존재 할때
if($("#imageList").children('li').length >0){
let liData = $("#imageList").children('li')
for(let i = 0; i<=liData.length ; i++){
// li 의 class 값중 'active' 가 존재 하는 기준으로
if ("active" ===liData[i].className){
// 위 키보드를 눌렀을때 더이상 위가 없으면 아무반응 안함
if(i==0 && e.keyCode == 38){
console.log("no up")
return false
}
// 아래 키보드를 눌렀을때 더이상 아래가 없으면 아무반응 안함
if(i==liData.length-1 && e.keyCode == 40){
console.log("no down")
return false
}
// 위, 아래 로 이동 하면서 이동된 li 를 클릭 한다
if( e.keyCode == 38){
let chk_i = i -1
liData[chk_i].click()
return false
}
if( e.keyCode == 40){
let chk_i = i +1
liData[chk_i].click()
return false
}
}
}
}
}
}
});
반응형