본문 바로가기
공부/자바스크립트 jQuery

jQuery) 폼 Focus

by Ohming 2012. 1. 30.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
포커스는 방문객의 커서가 특정 필드 위나 안에 머물 때 발생하는 이벤트다. 이 필드에 이미 입력된 값을 제거하기 위해 사용하기도 한다.
<input name="username" type="text" id="username" value="이름을 입력해주세요">
이렇게 하면 "이름을 입력해주세요" 라는 값을 가진 텍스트 필드를 만들 수 있다. 이 기술을 사용하면 방문객이 필드에 입력해야 할 값에 대해 안내할 수 있다. 하지만 방문객이 이 폼에 값을 입력하려고 할 때 안에있는 글을 지워주기 위해서 아래와 같이 jQuery를 사용할 수 있다.
defaultValue는 페이지가 처음 읽어들여졌을 때 가지고 있던 텍스트를 의미한다. 필드의 텍스트를 지워도, 웹 브라우저는 처음의 값을 기억하기 때문에 이렇게 사용할 수 있다. 필드의 현재값(field.val() )을 처음 필드에 있던 값과 같은지 비교해서 같다면 자바스크립트는 필드에 있는 값을 지운다.
$('#username').focus(function(){
  var field = $(this);
    if(field.val() == field.attr('defaultValue')){
        field.val('');
    }
});


'공부 > 자바스크립트 jQuery' 카테고리의 다른 글

jQuery) 폼에 포커스 주기, 필드사용/사용안함  (0) 2012.01.30
jQuery) Blur, Click, Change  (2) 2012.01.30
jQuery) Submit (전송버튼)  (0) 2012.01.30
jQuery) 폼 필드 선택자  (0) 2012.01.30
탐색 메뉴  (0) 2012.01.25

댓글