콤보 상자(ComboBox : select)

개요(Overview)

콤보상자는 기본적으로 정해진 옵션 중에 한 가지 메뉴를 선택하는 입력서식으로, 접힌 상태에서 간편하게 화살표 키를 통해 탐색과 선택이 동시에 가능하며, 클릭하여 확장하여 화살표 키로 탐색을 먼저 진행 한 다음 선택하는 드롭다운형 요소이다.

HTML에서 지원하는 select 태그에는 multiple 속성을 통해 펼처진 형태의 메뉴로 제공할 수 있으나, 대중적으로 사용하지 아니하여 다루지 않는다.

국내 사이트에서는 주로 게시글 검색 필터나 회원가입에서의 전화번호 앞 세 자리 등을 입력받을 때 찾아볼 수 있다.

이 예제의 내용은 다소 생략돼 있습니다

상태/선택정보 및 초점관리는 앞서 업로드한 올바른 자동완성 기능 제공방법과 많은 부분을 공유하므로 중복된 내용을 생략합니다.

추가 키보드 조작

알파벳 키 탐색 select 요소는 영문으로 된 option 한정으로 a부터 z까지의 단축키로 옵션을 탐색할 수 있어야 한다.
첫번째/마지막 요소로 이동 자동완성 편집기능이 없는 일반적인 select 요소는 Home 또는 End 키를 통해 첫 요소와 마지막 요소로 이동할 수 있어야 한다.

EXAMPLE

  • Apple
  • Apricot
  • Fig
  • Grapes
  • Korean Melon
  • StrawBerry
  • Tangerine
  • Persimmon
  • Pear
  • Peach
  • Plum
  • Pomegranates
  • Watermelon
  • Banana
  • Mango
  • Pineapple