메뉴 건너뛰기

조회 수 6481 추천 수 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
번호 제목 날짜 조회 수
125 JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소 file 2016.09.11 3690
124 이클립스 실행할때 자신이 원하는 JDK 지정하는 방법 file 2016.09.11 3410
123 특정 HTML DOM 엘레멘트로 스크롤 이동하기 2016.09.08 4286
122 모바일 홈페이지로 자동 이동하는 방법.... 2016.09.01 4077
121 이동 가능한 레이어팝업 소스 2016.09.01 4203
120 jquery offset()을 이용한 부드러운 스크롤 이동 2016.09.01 4084
119 이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload ) file 2015.06.19 4637
118 iframe사용시 높이 자동 조절 2015.06.19 3740
117 [라디오버튼 오류 체크] 간단한 문제 예제 file 2015.06.19 4189
116 자바스크립트 아이디 기억하기 기능 구현 (쿠키저장) file 2015.06.19 6128
115 공백 검사 함수 2015.06.19 5589
114 자바스크립트 API 문서 2015.06.19 6780
113 JSON API - JSON.parse(), JSON.stringify() ( json 형태의 문자열을 JSON객체로 , JSON객체를 문자열로 ) file 2015.06.19 3629
112 창 크기 최대화 시키기 file 2015.06.19 7028
111 예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그) file 2015.06.19 3655
110 Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성 file 2015.06.19 5042
109 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 4167
108 핸드폰 번호 일부 마스킹크 작업 (정규식 이용) 2015.06.19 6262
107 예제 - 자바스크립트로 현재 달의 달력 만들기 (calendar) 2015.06.19 6830
106 마우스 드래그, 오른쪽 팝업메뉴, 선택 막기 (IE11, 파이어폭스, 크롬 확인) 2015.06.19 5226
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 11 Next
/ 11

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved