키보드로 셀렉트박스 탐색하기

[#NOBR_START#]

[#NOBR_END#]
1. 개요 (Overview)
키보드로 셀렉트 박스를 탐색할 수 있게 해주는 스크립트입니다.

    class SboxKeySearch([object SelectBox])
  • SelectBox : 기능을 추가할 대상 SelectBox의 객체입니다. 생략할 경우 모든 셀렉트박스에 적용됩니다.

2. 사용법 (Usage)
스크립트 파일을 문서에 포함합니다. 그 다음에 새로운 객체를 생성하면서 대상이 되는 셀렉트박스를 정해줘야 하는데 생략한다면 현재 문서내에 존재하는 모든 셀렉트박스가 됩니다.
객체의 생성은 꼭 문서의 끝부분(</body> 바로 위) 에서 실행하세요.

[code type=html]<script type="text/javascript">
/**
* 키보드로 셀렉트박스 탐색하기
*
* by 행복한고니 (http://mygony.com)
* 20051117
*
* 소스를 불러온 뒤 SboxKeySearch(원하는오브젝트) 를 사용한다.
* 원하는 오브젝트를 생략하면 모든 셀렉트박스에 적용된다.
*/
var SboxKeySearch = function(obj)
{
....// for all select box
....if (typeof(obj) == "undefined" || obj == null) {
........var objs = document.getElementsByTagName("select");

........for (var i=0; i<objs.length; i++) {
............new SboxKeySearch(objs[i]);
........}
........return;
....}

....try {
........obj.attachEvent("onkeydown", SboxKeySearch.keyHook);
....} catch(e) {
........try {
............obj.addEventListener("keydown", SboxKeySearch.keyHook, false);
........} catch(ee) {
............return;
........}
....} finally {
........obj.keySearchObject = this;
....}
}
SboxKeySearch.keyHook = function(oEvent)
{
....var target = oEvent.srcElement || oEvent.target;
....var sindex = target.selectedIndex+1;
....var code = 0;

....if (oEvent.keyCode < 32 || oEvent.keyCode > 128) return;

....for (var i=sindex; i < target.options.length; i++) { ........code = SboxKeySearch.getCode(target.options[i].text); ........if (oEvent.keyCode == code || oEvent.keyCode == code-1000) { ............target.selectedIndex = i; ............return; ........} ....} ........for (i=0; i < sindex; i++) { ............code = SboxKeySearch.getCode(target.options[i].text); ............if (oEvent.keyCode == code || oEvent.keyCode == code-1000) { ............target.selectedIndex = i; ............return; ........} ....} } SboxKeySearch.layout = { ....0:82,2:83,3:69,5:70,6:65,7:81,9:84,11:68,12:87,14:67,15:90,16:88,17:86,18:71,8:81,13:87,4:69,1:82,10:84 } SboxKeySearch.getCode = function(txt) { ....var layout = SboxKeySearch.layout; ....var ch = txt.charCodeAt(0); ....// english or number? ....if (ch < 128) return ch; ....// only jaum (12593 <= ch <= 12622) ....if (ch > 12592 && ch < 12623) return SboxKeySearch.jaumCode(ch); ....ch -= 44032; ....if (ch < 0 || ch > 11171) return 0;
....ch = Math.floor(Math.floor(ch/28)/21);

....return layout[ch];
}
SboxKeySearch.jaumCode = function(jaum) {
....var conv = {0:0,3:2,6:3,8:5,16:6,17:7,20:9,22:11,23:12,25:14,26:15,27:16,28:17,29:18,18:8,24:13,7:4,1:1,21:10};
....return conv[jaum-12593];
}
</script>[/code]

위와 같이 new 연산자를 사용해서 새로운 객체를 생성해주면 됩니다.
document......("sbox1") 이 부분을 생략한다면 문서 내의 모든 셀렉트박스에 적용됩니다.

3. 예제
적용하지 않은 셀렉트박스 (왼쪽)와 적용한 셀렉트박스(오른쪽)
셀렉트 박스를 선택한 후에 키보드로 자음을 눌러세요. 예를 들어 채연을 찾으려면 키보드의 C키를 누르면 됩니다.
[#NOBR_START#]


[#NOBR_END#]

4. 호환성 (Comportability)
이 스크립트가 잘 작동하는 것으로 알려진 웹브라우저를 표시합니다. 특별한 언급이 없으면 아래 목록의 브라우저의 상위 버전에서도 이 스크립트는 정상작동합니다. 다른 버전이나 다른 브라우저에서 테스트해보신 분은 알려주시기 바랍니다.

  • Microsoft Internet Explorer 6.0 SP2
  • Mozilla Firefox 1.0.4
  1. 오, 아주 좋네요. 감사합니다. 그런데... onchange 이벤트가 발생하지 않는 점 하나가 딱 걸리네요. 지금 사용 중인 웹 페이지에 넣어봤는데 onchange 이벤트가 동작하지 않았습니다. 요것도 살짝 업데이트 해주시면~... - -

Leave a Reply to 센티멘탈Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.