포털 사이트 네이버나 다음에 접속하면, 검색창에 커서가 깜박깜박여서 바로 입력을 할 수 있다던가,
기타 로그인시에 ID 입력 부분에 커서가 자동으로 위치하게 되는 경우 말이죠.
네 그렇습니다. 역시 그것또한 메소드를 통해서 구현이 된 것인데요.
이번에 소개시켜드릴 focus()와 blur()가 그 주인공입니다.
다음과 같은 기능을 지닙니다.
1. 텍스트 창의 경우, 커서를 위치시켜 바로 입력이 가능합니다.
2. 버튼의 경우, 엔터 키를 눌렀을때 클릭 효과를 냅니다.
blur() - focus와 반대의 기능을 하는 것으로
1. 창의 경우, 최소화 시켜 버립니다.
우선 대표적인 focus()의 예를 볼게요. 다음의 보시는 소스는 개인정보 입력 폼입니다. 
Doit.html
<HEAD><TITLE>자바스크립트를 활용한 메시지창 띄우기</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
1. function moveFocus(next){
if(event.keyCode == 13){
document.getElementById(next).focus();
}
}
function onclick_confirm(){
alert("엔터로 버튼을 누르셨습니다.")
}
</SCRIPT>
<BODY>
<FORM>
[개인정보 입력]<br>
2. 이름 : <INPUT name=pname type=text size=10 onkeydown=moveFocus("age")><br>
나이 : <INPUT name=age type=text size=10 onkeydown=moveFocus("sex")><br>
성별 : <INPUT name=sex type=text size=10 onkeydown=moveFocus("confirm")>
<INPUT type="button" name="confirm" value="confirm" onclick=onclick_confirm()>
</FORM>
</BODY>
</HTML>
소스 설명입니다~^^
1. 다음 요소(텍스트필드와 버튼)로의 이동
if(event.keyCode == 13){
document.getElementById(next).focus();
}
}이 함수는 다음 요소로 focus를 옮기는 기능을 가지고 있습니다.
우선 인자로서 next를 받는데요, 이 인자는 다음에 올 요소의 name값을 받습니다.
if 문에서 event 객체의 keyCode 프로퍼티가 13인지 확인을 하는데요, 13은 키값 중에서 엔터를 의미합니다.
그래서 나중에 보게 될것이지만 onkeydown 이벤트 핸들러를 통해서 함수가 실행되었을때,
어떠한 키로 이벤트가 발생되어 메소드가 실행되었는지 키값을 확인할 수 있는 것이죠.
키값이 13 즉, 엔터키이면 조건문이 참이 되어서 안에 명령문을 실행시키는데요.
getElementById()에 인자 값으로 넘어온 String 값 "next" 를 넣어서 다음 요소를 참조시키고,
focus() 함수로써 커서를 넘기는 즉, 포커스를 다음 요소로 넘깁니다.
위의 소스를 실행시켜보면 이 함수에 의해서 다음과 같이 진행됨을 알 수 있습니다.
▷ 엔터클릭 ▷ 성별 입력란(text필드)으로 커서 이동 ▷ 엔터클릭 ▷ confirm 버튼 실행
여기서 알 수 있는 것은, 버튼에다가 focus를 줄 경우, 버튼을 마우스로 클릭한 효과와 같다라고 할 수 있겠습니다.
confirm 버튼에게 focus를 넘겨준 것은 성별에 있는 input 태그임을 기억하세요 ^^
2. onkeydown 이벤트 핸들러를 통한, 키값으로 이벤트 발생시키기.
form 안에 정의되어 있는 text 필드 입니다. 여기에 속성으로 쓰인 onkeydown 핸들러는 해당 요소-여기에서는 pname을 이름으로 한 text 필드, 즉 위의 input태그를 의미합니다.- 에서 키보드를 조작할 때 이벤트를 발생시키는데요,
저는 위에서 정의한 moveFocus()함수를 실행시키도록 연결 시켰습니다. 그리고 그 함수의 인자값에는 이동시킬 요소의 태그 name이 적혀있구요.
blur()에 대해서는 따로 설명하지 않을게요. focus()와 반대되는 성격을 가졌는데요.
단순히 focus를 잃게 만들거나, 다음과 같이 window에 blur()를 적용하게 되면 창이 최소화 되면 숨겨 집니다.
유효성 검사, 모든 폼에 값이 입력되도록 해보자!
