happy cat image

everdevel

So This Is Love

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

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="https://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>

결과는 바로 아래에서 확인하겠습니다.

강좌를 마칩니다.^^


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

내가 알고 싶은 건 이미 꿈을 가지고 있는 자들이 얼마나 대단한 노력을 해왔는지가 아니라, 나도...이런 나도, 노력이라는 걸 하게끔 만드는 그 꿈을 어떻게 찾으면 되는가, 였는데...


    
    

강좌로 돌아가기

댓글 0개

정렬기준