wilson's story

키보드의 방향키로 목록 이동하여 목록값 선택 하기 본문

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
                        }
                    }
                }
            }
        }
    }

});
반응형