방문해 주셔서 감사합니다.
input태그를 마우스로 클릭하여 입력상태로 만든것을 포커스를 얻었다고 한다.
그리고 입력상태를 떠난것을 포커스가 벗어났다고 한다.
그러면 우선 포커스를 얻었을때 어떠한 행위가 나타나도록 해보자.
$('.class_Name').focus();
$('.class_Name').blur();
우리는 앞 강좌에서 val()에 대해서 공부 했는데 이것을 활용해보자.
포커스를 얻으면 포커스를 얻었다는 문구가 입력창에 뜨게 되고 벗어나면 포커스를 벗어났다는 문구가 뜨도록 해보자.
<input type="text" class="text1" value="input your name" /> <input type="text" class="text2" value="input your id" />
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개
정렬기준