📝 jQuery
🖥️ 1. focus()
- 요소에 포커스가 들어갔음을 감지하는 이벤트
focus()는 함수로써 사용할 경우 강제로 포커스를 지정하는 기능은 갖지만, 이벤트로써 사용할 경우 포커스가 들어갔음을 감지하는 기능
$("셀렉터").focus(function(e){ .... });
🖥️ 2. blur()
- 포커스가 빠져나왔음을 감지하는 이벤트
blur() 함수는 포커스가 빠져나왔음을 감지한다.
$("셀렉터").blur(function(e){ .... });
📝 예제
EX)
<head>
...
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<form id="myform">
<h3>주민번호를 입력하세요</h3>
<input type="text" name="jumin1" id="jumin1"/>
-
<input type="password" name="jumin2" id="jumin2"/>
</form>
<script>
$("#jumin1, #jumin2").focus(function(){
$(this).css('background-color','powderblue');
});
$("#jumin1, #jumin2").blur(function(){
$(this).css('background-color','#fff');
});
// 키 이벤트 설정
$("#jumin1").keyup(function(){
let value = $(this).val();
if( value.length >= 6 ){
let input = value.substring(0,6); // 6자리만 남겨놓고 자른다.
$(this).val(input);
$('#jumin2').focus();
}
});
</script>
</body>