happy cat image

everdevel

Make It Yours, 에버디벨

UI 변경

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기

웹애플리케이션을 만들고 싶은데 이것도 알아야 하고
저것도 알아야 한다는데 어떻게 해야할지 모르겠다면

웹프로그래밍 초보자를 넘어 프로그래밍을 처음 접하는 분들을 위해
에버디벨이 1년넘게 작업한

HTML5 + CSS3 + jQuery + MySQL + PHP

한권으로 배우는 웹코딩 시작하기

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>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.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>

강좌를 마칩니다.^^

강좌로 돌아가기