[jQuery] input focus event 사용 예제 (스타일 변경, focus 이동, focus element)

아래 소스 코드는 입력 필드에 포커스 이벤트를 추가하고, 포커스 이벤트에 따라 스타일을 변경하고 다음 입력 필드로 포커스를 이동하는 예제입니다.

 

소스코드

 

$('input').focus(function() { ... });

- 모든 <input> 요소에 대해 포커스 이벤트를 추가합니다. 포커스가 들어온 경우, 해당 입력 필드의 배경색을 'lavenderblush'로 변경합니다.

$('input').blur(function() { ... });

- 입력 필드에서 포커스가 빠져나간 경우, 입력 필드의 배경색을 원래대로 돌리기 위해 스타일을 초기화 합니다.


$('input').keypress(function(e) { ... });

- 입력 필드에서 키보드 이벤트를 감지합니다. Enter 키 가 눌린 경우, 다음 input 필드로 포커스를 이동합니다.

$('#NewPassword').on('input', function() { ... });

- #NewPassword 입력 필드에서 입력 이벤트를 감지하고, 현재 포커스된 입력 필드의 ID를 콘솔에 출력합니다.

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
	$('input').focus(function() {
		// 포커스가 들어온 입력 필드 스타일 변경
		$(this).css('background-color', 'lavenderblush');
	}).blur(function() {
		// 포커스가 빠져나간 입력 필드 스타일 원래대로 변경
		$(this).css('background-color', '');
	});
	$('input').keypress(function(e) {
		var id = $(':focus').attr('id');
		if (e.keyCode == 13) {
			e.preventDefault();
			$(this).closest('div.inputBox').next().find('input').focus(); // 다음 inputBox에서 다음 입력 필드로 포커스 이동
		}
	});
	$('#NewPassword').on('input', function() {
		var id = $(':focus').attr('id');
		console.log(id);

	});
});
function maxLengthChk(object){
	if (object.value.length > object.maxLength){
		object.value = object.value.slice(0, object.maxLength);
	}    
}
</script>
<div class="inputBox">
	<label for="password">현재 비밀번호</label>
	<input type="password" name="OldPassword" id="OldPassword" maxlength="16" oninput="maxLengthChk(this)" placeholder="현재 비밀번호를 입력하세요">
</div>
<div class="inputBox">
	<label for="password">새로운 비밀번호</label>
	<input type="password" name="NewPassword" id="NewPassword" maxlength="16" oninput="maxLengthChk(this)" placeholder="새로운 비밀번호를 입력하세요">
</div>

<div class="inputBox">
	<label for="rePassword">새로운 비밀번호 재입력</label>
	<input type="password" name="certainPassword" id="certainPassword" maxlength="16" oninput="maxLengthChk(this)" placeholder="비밀번호를 한번 더 입력하세요">
</div>

 

focus 이벤트를 잘 활용 하셔서 웹 페이지의 효율성을 높여 줄 수 있습니다.

 

focus 이벤트