메뉴 건너뛰기

조회 수 4762 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
다들 당연하게 생각하셨는지 모르겠지만, 왜 그런거 있잖아요?

 포털 사이트 네이버나 다음에 접속하면, 검색창에 커서가 깜박깜박여서 바로 입력을 할 수 있다던가,

기타 로그인시에 ID 입력 부분에 커서가 자동으로 위치하게 되는 경우 말이죠.

 

 네 그렇습니다. 역시 그것또한 메소드를 통해서 구현이 된 것인데요.

이번에 소개시켜드릴 focus()blur()가 그 주인공입니다.

 

 다음과 같은 기능을 지닙니다.

focus() -  해당 요소에 포커스를 부여하여

   1. 텍스트 창의 경우, 커서를 위치시켜 바로 입력이 가능합니다.

   2. 버튼의 경우, 엔터 키를 눌렀을때 클릭 효과를 냅니다.

 

blur() - focus와 반대의 기능을 하는 것으로

                1. 창의 경우, 최소화 시켜 버립니다.


 우선 대표적인 focus()의 예를 볼게요. 다음의 보시는 소스는 개인정보 입력 폼입니다.         Doit.html

<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. 다음 요소(텍스트필드와 버튼)로의 이동

function moveFocus(next){

if(event.keyCode == 13){

document.getElementById(next).focus();

}

}

 이 함수는 다음 요소로 focus를 옮기는 기능을 가지고 있습니다.

우선 인자로서 next를 받는데요, 이 인자는 다음에 올 요소의 name값을 받습니다. 

 

 if 문에서 event 객체의 keyCode 프로퍼티가 13인지 확인을 하는데요, 13은 키값 중에서 엔터를 의미합니다.

그래서 나중에 보게 될것이지만 onkeydown 이벤트 핸들러를 통해서 함수가 실행되었을때,

어떠한 키로 이벤트가 발생되어 메소드가 실행되었는지 키값을 확인할 수 있는 것이죠.

 

 키값이 13 즉, 엔터키이면 조건문이 참이 되어서 안에 명령문을 실행시키는데요.

getElementById()에 인자 값으로 넘어온 String 값 "next" 를 넣어서 다음 요소를 참조시키고,

focus() 함수로써 커서를 넘기는 즉, 포커스를 다음 요소로 넘깁니다.

 

 위의 소스를 실행시켜보면 이 함수에 의해서 다음과 같이 진행됨을 알 수 있습니다.

이름 입력란(text 필드) ▷ 엔터클릭  ▷ 나이 입력란(text필드)으로 커서 이동 
▷ 엔터클릭  ▷ 성별 입력란(text필드)으로 커서 이동  ▷ 엔터클릭  ▷ confirm 버튼 실행

 

  여기서 알 수 있는 것은, 버튼에다가 focus를 줄 경우, 버튼을 마우스로 클릭한 효과와 같다라고 할 수 있겠습니다.

confirm 버튼에게 focus를 넘겨준 것은 성별에 있는 input 태그임을 기억하세요 ^^

 

2. onkeydown 이벤트 핸들러를 통한, 키값으로 이벤트 발생시키기.

<INPUT name=pname type=text size=10 onkeydown=moveFocus("age")><br>

 form 안에 정의되어 있는 text 필드 입니다. 여기에 속성으로 쓰인 onkeydown 핸들러는 해당 요소-여기에서는 pname을 이름으로 한 text 필드, 즉 위의 input태그를 의미합니다.- 에서 키보드를 조작할 때 이벤트를 발생시키는데요,

저는 위에서 정의한 moveFocus()함수를 실행시키도록 연결 시켰습니다.  그리고 그 함수의 인자값에는 이동시킬 요소의 태그 name이 적혀있구요.  


 

 blur()에 대해서는 따로 설명하지 않을게요. focus()와 반대되는 성격을 가졌는데요.

단순히 focus를 잃게 만들거나, 다음과 같이 window에 blur()를 적용하게 되면 창이 최소화 되면 숨겨 집니다

window.blur();


List of Articles
번호 제목 날짜 조회 수
94 자바스크립트 이벤트 목록입니다. ( javascript event ) 2015.04.06 2670
93 '레이블', 반복문을 제어하자! file 2015.02.03 2784
92 'Array', 배열 및 다차원 배열 선언에 대해 알아보자! 2015.02.03 5235
91 배열의 리터럴 선언, 또다른 배열 선언 방법! 2015.02.03 3044
90 '문자 ↔ 숫자', 타입을 바꿔보자! 2015.02.03 3112
89 드롭다운 메뉴를 만들어보자! -1탄 file 2015.02.03 3598
88 'onmouseover', 마우스 오버 효과 - 글씨 바꾸기! file 2015.02.03 4555
87 'setInterval', 타이머를 사용하자! ==setTimeout 2015.02.03 2932
86 'blur', 이미지 클릭시 테두리를 없애자! file 2015.02.03 3358
85 'setTimeout', 타이머를 사용하자! file 2015.02.03 3150
84 'opener', 부모창과 자식창의 텍스트를 교환하자! file 2015.02.03 3529
83 'open', 새창을 열어보자! file 2015.02.03 3175
82 'checkbox', 체크박스 모두체크 그리고 모두해제! file 2015.02.03 3525
81 'button', 클릭한 횟수 알아내기! file 2015.02.03 4318
80 유효성 검사, 모든 폼에 값이 입력되도록 해보자! file 2015.02.03 2744
» 'focus', 엔터 누르고 이동하자! file 2015.02.03 4762
78 5초후 자동으로 창닫기 2015.02.03 3408
77 달력 2015.02.03 3847
76 양력-음력 2015.02.03 3194
75 버튼 삭제 2015.02.03 2706
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved