JavaScript를 사용하여 위아래로 화살표 키를 사용하여 DIV 내용에 액세스
-
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에는 텍스트가 있습니다 ... 상호 작용 요소가 포함되어 있지 않으므로 키보드는 여기에 관련이 없습니다. 질문을 자세히 설명해야할까요?