Tab키 이벤트 Focus이동(tabindex 속성)

tabindex 속성

- tab키를 통하여 브라우저를 탐색시, 순서를 임의로 조정 할 수 있다. 

- a, area, button, input, object, select, textarea 태그에 적용 가능하다.

- -32767 ~ 32767 까지의 값을 입력할 수 있다. 

 

tabindex = "1"

- 문서 안에서 가장 먼저 초점을 받게 한다. autofocus="autofocus"와 기능이 같다. 자연스런 Markup 순서를 거스른다. 

 

tabindex = "0"

- 키보드 초점을 받지 못하는 div, span 등에 초점을 줄 수 있으며, tabindex=0은 Markup 순서대로 인식한다. 

 

tabindex = "-1"

- 키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 만들어 준다. 초점을 받을 수 없기 때문에 -1이외의 다른 음의 정수 값은 사실상 의미가 없다.  

 

 

<script>
 // 페이지로드시 이벤트 
 window.onload = function (){
        document.observe("dom:loaded", function(event) {
            document.observe("keydown", function(event) {
                //자바스크립트 탭키코드
                if (event.keyCode == "9") {
                    //기본 tab이벤트는 한칸이동 동작을하므로 기본이벤트 취소
                    event.stop();
                    //이동할 리스트변수
                    var TabList = new Array();
                    $A(document.forms[0].elements).each(function(item) {
                        //인풋테그만 담기
                    if (item.tagName.toLowerCase() == "input") {
                            //히든등이 들어올수 있으므로 text, radio, checkbox로 필터링
                            if (item.type.toLowerCase() == "text" || item.type.toLowerCase() == "radio" || item.type.toLowerCase() == "checkbox") {
                                //사용하지 않는 readonly, disable필드 필터링
                                if (!item.readOnly && !item.isDisabled) {
                                    //tabindex가 있는 엘리먼트만 필터링
                                    if (item.readAttribute("tabindex") != null) {
                                        TabList.push($(item));
                                    }
                                }
                            }
                        }
                    });
                    //현제 이벤트 엘리먼트 저장
                    var targetElement = event.element();
                    //다음필드 인덱스 변수
                    var NextIndex;
                    //현재 다음필드로변수에 저정할 인덱스 가져오기
                    TabList.find(function(item, index) {
                        if (item == targetElement) {
                            //엔터로 이동시키려고 할경우 index + 1(탭자체 기본이동기능이 잇으므로)
                            NextIndex = index + 1
                            return item == targetElement;
                        }
                    });
                    //포커스변경
                    try {
                        TabList[NextIndex].focus();
                    }
                    catch (e) {
                        //마지막인덱스 이후 +1 하면 없으니까 첫인덱스로 이동
                        TabList[0].focus();
                    }
                }
            });
        });
}
</script>