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>COREASUR :: 제이쿼리 강좌</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>
강좌를 마칩니다.^^