JavaScript를 사용하여 위아래로 화살표 키를 사용하여 DIV 내용에 액세스

StackOverflow https://stackoverflow.com/questions/402448

  •  03-07-2019
  •  | 
  •  

문제

4 개의 자식 DIV 태그가 포함 된 DIV 태그가 있습니다.

 
   <Div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
  </Div>

이제 JavaScript를 통해 위아래로 화살표 키를 사용 하여이 자식 Div에 액세스하고 싶습니다. 위의 div는 텍스트 상자의 클릭시 표시됩니다. 사용자가 자식 div를 선택할 수 있고 선택한 값이 텍스트 상자에 나타나기를 원합니다. 나는 각 childdiv에 autchinh onclick 이벤트를 통해 최종 결과를 달성했습니다.

도움이 되었습니까?

해결책

당신은 알려진 것을 찾고 있습니까? 자동 완성 아니면 제안?

다른 팁

다음은 라이브러리 무료 솔루션이 있습니다.

텍스트 상자가 초점을 얻거나 집중력을 잃을 때 DIV를 숨기고 표시하는 이벤트를 추가 할 수 있습니다. 아마도 [ESC]가 선택을 지워야합니까? (IE에서 테스트하지 않았습니다)

<style>div.active{ background: red }</style>

<input type="text" id="tb">

<div id="Parent">
     <div id="childOne">ChildOne </div>
     <div id="childOne">ChildTwo </div>
     <div id="childOne">ChildThree </div>
     <div id="childOne">ChildFour </div>
</div>
<script type="text/javascript">


function autocomplete( textBoxId, containerDivId ) {
    var ac = this;
    this.textbox     = document.getElementById(textBoxId);
    this.div         = document.getElementById(containerDivId);
    this.list        = this.div.getElementsByTagName('div');
    this.pointer     = null;

    this.textbox.onkeydown = function( e ) {
        e = e || window.event;
        switch( e.keyCode ) {
            case 38: //up
                ac.selectDiv(-1);
                break;
            case 40: //down
                ac.selectDiv(1);
                break;
        }
    }

    this.selectDiv = function( inc ) {
        if( this.pointer !== null && this.pointer+inc >= 0 && this.pointer+inc < this.list.length ) {
            this.list[this.pointer].className = '';
            this.pointer += inc;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
        if( this.pointer === null ) {
            this.pointer = 0;
            this.list[this.pointer].className = 'active';
            this.textbox.value = this.list[this.pointer].innerHTML;
        }
    }
} 

new autocomplete( 'tb', 'Parent' );
</script>

당신은 분명히 'Autosuggest/Autocomplete'을 찾고 있습니다. 이것은 순수한 JavaScript로 그것을하려면 완전히 구현하기가 시간이 많이 걸리지 만, Strager의 예제를 사용하여 시작할 수 있습니다.

내가 추천하는 것은 사용하는 것입니다 jQuery 대신에. jQuery는 아주 친절합니다 자동 완성 용 플러그인 사용할 수 있습니다. 방금 며칠 전에 내 프로젝트 중 하나에서 구현했는데 잘 작동하는 것 같습니다.

소프트웨어를 만드는 동안 기억해야한다는 중요한 말이 있습니다. '바퀴를 다시 발명하려고하지 마십시오.'

다른 프로그래머가 이미 해냈고 공유하고, 사용하고, 감사 할만 큼 친절하다면.

건배!

"화살표 키로 액세스"는 무엇을 의미합니까? 각 div에는 텍스트가 있습니다 ... 상호 작용 요소가 포함되어 있지 않으므로 키보드는 여기에 관련이 없습니다. 질문을 자세히 설명해야할까요?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top