자바 스크립트 키보드 이벤트 입문서? (또는 오히려 : 사용자 정의 드롭 다운으로 나를 도와주세요)

Question

내 사용자 정의 내장 ajax [div] 기반의 동적 드롭 다운을 마무리하는 데 도움이 필요합니다.

기본적으로 나는 [입력] 상자가 있습니다. onkeyup은 div에 많은 결과를 반환하고 innerHTML을 사용하여 다시 그려지는 Ajax 검색을 실행합니다. 아름답게 ..

[input] 
[div id=results] //this gets overwritten contantly by my AJAX function 
    [div id=result1 onmouseover=highlight onclick=input.value=result1] 
    [div id=result2 onmouseover=highlight onclick=input.value=result2] 
    [div id=result2 onmouseover=highlight onclick=input.value=result2] 
[/div] 

의미가 있습니다 :이 div의 모든 onmouseover 그래서, 전형적인 성공적인 검색은 다음과 같은 구조 (반 코드를 용서)를 산출 하이라이트있다! 우아하게 보이고 어떤 일반 드롭 다운보다 더 완벽합니다 (그 결과 div는 많은 정보를 가져옵니다).

그러나 정규 HTML 요소 뒤에있는 중요한 기능 중 대부분을 놓치고 있습니다. 즉, "옵션"사이에서 키보드를 올리거나 사용할 수 없습니다. 어떻게해야합니까? 자바 스크립트가 키보드 이벤트를 처리한다는 것을 알고 있지만; 나는 이것을하는 방법에 관한 좋은 안내서를 찾을 수 없었다. (물론, 이에 대한 후속 질문은 결국 끝나게 될 것입니다 : <ENTER>을 사용하여 onclick 이벤트를 발생시킬 수 있습니까?)

Answer 1

div에 이벤트 리스너를 첨부하면 id="results"이됩니다. 이를 만들 때 onkeyup, onkeydown 등의 속성을 div에 추가하거나 JavaScript를 사용하여 첨부 할 수 있습니다.

1. 당신이 뭔가 대부분의 AJAX의 libaries 인 Auto Complete 컨트롤을 만들려고처럼 소리 :

   나의 추천은 두 가지 이유 등 YUI 같은 AJAX 라이브러리, jQuery, Prototype를 사용하는 것이 될 것이다 제공해야합니다. 기존 구성 요소를 사용할 수 있으면 많은 시간을 절약 할 수 있습니다.

2. 라이브러리가 제공하는 컨트롤을 사용하지 않으려는 경우에도 모든 라이브러리는 여러 브라우저에서 제공하는 이벤트 API 간의 차이를 숨기는 데 도움이되는 이벤트 라이브러리를 제공합니다.

Forget addEvent, use Yahoo!’s Event Utility은 이벤트 라이브러리에서 제공해야하는 정보를 제공합니다. 나는 jQuery, Prototype 등이 제공하는 이벤트 라이브러리를 꽤 확신한다. al. 유사한 기능을 제공합니다.

그 기사가 머리 위로 간다면 this documentation을 먼저 본 다음 원래 기사를 다시 읽으십시오. (필자는 이벤트 라이브러리를 사용한 후에 기사를 훨씬 더 많이 읽었습니다.)

다른 몇 가지 : 자바 스크립트를 사용

• 등이 HTML에 속성 onkeyup를 작성하는 것보다 훨씬 더 제어 할 수 있습니다. 당신이 무언가를하고 싶지 않다면 정말 간단합니다. JavaScript를 사용하겠습니다.
• 키보드 이벤트를 처리하기 위해 코드를 작성하면 good key code reference이 편리합니다.

Answer 2

내 머리 꼭대기에서 나는 어떤 형태를 유지해야한다고 생각합니다. 현재 드롭 다운 목록의 항목을 반영하는 JavaScript의 데이터 구조 현재 활성/선택된 항목에 대한 참조가 필요합니다.

keyup 또는 keydown가 실행될 때마다 데이터 구조에서 활성/선택된 항목에 대한 참조를 업데이트하십시오. UI에 강조 표시 정보를 제공하려면 항목이 활성화/선택되어 있는지 여부에 따라 CSS를 통해 스타일이 지정된 클래스 이름을 추가하거나 제거하십시오.

innerHTML도 실제로 표준이 아닙니다 (표준 작성 방법은 createTextNode(), createElement() 및 appendChild()을 참조하십시오). HTML 속성에서 처리하는 대신 JavaScript에서 이벤트 핸들러를 연결하는 방법에 대해 살펴볼 수도 있습니다.