[#NOBR_START#]
[#NOBR_END#]
1. 개요 (Overview)
키보드로 셀렉트 박스를 탐색할 수 있게 해주는 스크립트입니다.
- 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
와아 관심받고있다*-_-*
혹시, 화니님, 제가 아는 화니님 맞나용~?
기다림//그 화니가 아닐꺼같애요^^;
목록에 영어와 한글이 같이 있으면 잘안대는거같애요 ㅠㅠ
아, 그렇군요..
옛날에, 스쿨에 화니라는 닉을 쓰시는 분이 계셧었거든요 ㅎㅎ
오, 아주 좋네요. 감사합니다. 그런데... onchange 이벤트가 발생하지 않는 점 하나가 딱 걸리네요. 지금 사용 중인 웹 페이지에 넣어봤는데 onchange 이벤트가 동작하지 않았습니다. 요것도 살짝 업데이트 해주시면~... - -