드롭다운 '옵션' 사이에서 키보드로 아래로 또는 위로 이동하는 방법은 무엇인가요?

사용자 정의로 구축한 ajax [div] 기반 동적 드롭다운이 있습니다.

입력] 상자가 있는데, 온키업을 하면 div로 결과를 반환하는 Ajax 검색을 실행하고 innerHTML을 사용하여 다시 끌어옵니다. 이러한 div는 모두 mouseover를 강조 표시하므로 일반적으로 검색에 성공하면 다음과 같은 구조가 됩니다(세미코드는 용서해 주세요):

[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]

작동합니다.

하지만 일반 HTML 요소 뒤에 있는 중요한 기능을 놓치고 있습니다. '옵션' 사이에서 키보드를 아래로 또는 위로 누를 수 없습니다.

자바스크립트가 키보드 이벤트를 처리한다는 것을 알고 있지만; 좋은 가이드를 찾을 수 없었습니다. (물론, 후속 질문은 결국 엔트리를 사용하여 온클릭 이벤트를 트리거할 수 있는가?)입니다.

Ijas Ameenudeen
편집된 질문18일 1월 2019 в 8:01
프로그래밍
events keyboard javascript dom
7일 8월 2008 в 3:58
13 파운드
해결책

당신이 해야 할 일은 id="results"를 사용하여 div에 이벤트 리스너를 첨부하는 것입니다. 이 작업은 div를 생성할 때 onkeyup, onkeydown 등의 속성을 추가하거나 JavaScript를 사용하여 첨부할 수 있습니다.

두 가지 이유로 YUI, jQuery, Prototype 등과 같은 AJAX 라이브러리를 사용하는 것을 권장합니다:

  1. 대부분의 AJAX 라이브러리가 제공해야 하는 자동 완성 컨트롤을 만들려고 하는 것 같습니다. 기존 컴포넌트를 사용할 수 있다면 많은 시간을 절약할 수 있습니다.
  2. 라이브러리에서 제공하는 컨트롤을 사용하고 싶지 않더라도 모든 라이브러리는 다른 브라우저에서 제공하는 이벤트 API 간의 차이점을 숨기는 데 도움이 되는 이벤트 라이브러리를 제공합니다.

추가 이벤트는 잊어버리고 야후의 이벤트 유틸리티를 사용하세요는 이벤트 라이브러리가 제공하는 기능에 대한 좋은 요약을 제공합니다. jQuery, Prototype 등에서 제공하는 이벤트 라이브러리도 비슷한 기능을 제공한다고 확신합니다.

이 글이 이해가 되지 않는다면 이 문서를 먼저 살펴본 다음 원본 글을 다시 읽어보세요(저는 이벤트 라이브러리를 사용한 후에 이 글이 훨씬 더 이해가 잘 되었습니다).

몇 가지 다른 사항도 있습니다:

  • 자바스크립트를 사용하면 HTML에 온키업 등의 속성을 작성하는 것보다 훨씬 더 많은 제어 기능을 사용할 수 있습니다. 정말 간단한 작업을 하고 싶지 않다면 저는 자바스크립트를 사용할 것입니다.
  • 키보드 이벤트를 처리하는 코드를 직접 작성하는 경우 좋은 키 코드 참조가 정말 유용합니다.
Walter Rumsby
편집된 답변21일 8월 2008 в 2:46
해설 (0)

제 생각에는 현재 드롭다운 목록의 항목을 반영하는 일종의 데이터 구조를 자바스크립트에서 유지해야 할 것 같습니다. 또한 현재 활성/선택된 항목에 대한 참조가 필요합니다.

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

또한 이것은 큰 문제는 아니지만 innerHTML은 실제로 표준이 아닙니다(데이터를 생성하는 표준 방법은 createTextNode(), createElement() 및 appendChild()를 살펴보세요). 또한 HTML 어트리뷰트에서 이벤트 핸들러를 첨부하는 대신 자바스크립트에서 이벤트 핸들러를 첨부하는 방법을 살펴볼 수도 있습니다.

Alexander Elgin
편집된 답변10일 2월 2016 в 4:10
해설 (0)