devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 언젠가 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

disney Teyon kin

focus(),blur()

input태그를 마우스로 클릭하여 입력상태로 만든것을 포커스를 얻었다고 한다.

그리고 입력상태를 떠난것을 포커스가 벗어났다고 한다.

그러면 우선 포커스를 얻었을때 어떠한 행위가 나타나도록 해보자.

포커스를 얻을때 어떤 행위 하기

$('.class_Name').focus();

포커스를 벗어날때 어떤 행위 하기

$('.class_Name').blur();

우리는 앞 강좌에서 val()에 대해서 공부 했는데 이것을 활용해보자.
포커스를 얻으면 포커스를 얻었다는 문구가 입력창에 뜨게 되고 벗어나면 포커스를 벗어났다는 문구가 뜨도록 해보자.

HTML

<input type="text" class="text1" value="input your name" />
<input type="text" class="text2" value="input your id" />

jQuery

var text1 = $('.text1');
text1.focus(function(){
  text1.val('포커스를 얻었습니다.');
});
text1.blur(function(){
  text1.val('포커스를 벗어났습니다. .');
});

위와 같이 표현이 가능하다.

아래에 기능을 구현해보았다.

결과 보기

위의 입력창에 클릭을 하여서 포커스를 얻고, 탭을 눌러서 포커스를 벗어나보자

예제소스

<!doctype html>
<html>
<head>
<title>
웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var text1 = $('.text1');
  text1.focus(function(){
    text1.val('포커스를 얻었습니다.');
  }); 
  text1.blur(function(){
    text1.val('포커스를 벗어났습니다. .');
  });
});
</script>
<style>
</style>
</head>
<body>
<input type="text" class="text1" value="input your name" />
<input type="text" class="text2" value="input your id" />
</body>
</html>

강좌를 마칩니다.^^

다음강좌는 15강.편리한 this 입니다. 클릭하면 다음 강좌로 이동합니다.