목차
focus() 예제 - 입력창 포커스 시 글자 노출 후 사라지게 focus() 정의 focus() 구문 focus() 예제 - input 요소 focus 시 배경색,글자색 변경
focus() 예제 - 입력창 포커스 시 글자 노출 후 사라지게
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hz").focus(function(){
$("span").css ("display", "block").fadeOut (2000);
});
});
</script>
<style>
span {display: none;}
</style>
<input class='hz'>
<span>홈짱닷컴 Homzzang.com</span>
결과 보기
focus() 정의
※ focus 이벤트는 아래 경우에 발생함.
① 입력 요소를 마우스로 클릭.
② Tab 키로 해당 요소를 선택.
※ focus() 메서드는 아래 2가지 작동 가능.
① focus 이벤트 촉발.
② focus 이벤트 발생 시 실행할 함수 부착.
1. cf.
focus() 메서드: 해당요소에 포커스 될 때만 이벤트 발생.
focusin() 메서드: 해당요소 (또는, 자식요소)에 포커스 될 때 이벤트 발생.
2.
blur() 메서드와 주로 함께 사용됨.
focus() 구문
focus 이벤트 촉발.
$(selector ).focus()
focus 이벤트에 함수 부착.
$(selector ).focus(function )
[매개변수]
function
필수. focus 이벤트 발생 시 실행할 함수 지정.
focus() 예제 - input 요소 focus 시 배경색,글자색 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
$(this).css("color", "red");
});
$("input").blur(function(){
$(this).css("background-color", "white");
$(this).css("color", "black");
});
});
</script>
<p>홈짱닷컴 (Homzzang.com)</p>
<div>
이름: <input type="text" name="name"><br>
메일: <input type="text" name="email">
</div>
