다음은 jQuery의 focus()와 blur() 이벤트를 활용한 실용적인 예제들입니다. 이 이벤트들은 주로 폼 요소에서 사용되며 사용자 경험을 개선하는 데 유용합니다.
1. 입력 필드 강조 및 해제
사용자가 입력 필드에 포커스할 때 시각적으로 강조 표시하고 포커스를 벗어나면 기본 스타일로 복구합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus / Blur Example</title>
<style>
.highlight {
border: 2px solid #4CAF50;
background-color: #f9fff9;
}
input {
border: 1px solid #ccc;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<h3>Focus / Blur Highlight</h3>
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your password">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('input').focus(function() {
$(this).addClass('highlight');
}).blur(function() {
$(this).removeClass('highlight');
});
</script>
</body>
</html>
2. 폼 유효성 검사 표시
사용자가 입력 필드를 벗어났을 때(blur), 입력값의 유효성을 확인하고 메시지를 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation Example</title>
<style>
.error {
color: red;
font-size: 12px;
}
.success {
color: green;
font-size: 12px;
}
</style>
</head>
<body>
<h3>Validation Example</h3>
<form>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
<p id="email-feedback" class="error"></p>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#email').blur(function() {
const email = $(this).val();
const feedback = $('#email-feedback');
if (email === '') {
feedback.text('Email cannot be empty.');
} else if (!/\S+@\S+\.\S+/.test(email)) {
feedback.text('Please enter a valid email address.');
} else {
feedback.removeClass('error').addClass('success').text('Email is valid.');
}
});
</script>
</body>
</html>
3. 버튼 활성화 조건
폼 필드가 모두 입력되었을 때만 버튼을 활성화합니다. 각 입력 필드를 blur 이벤트로 확인합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Enable</title>
<style>
button {
background-color: #ccc;
color: white;
padding: 10px 15px;
border: none;
cursor: not-allowed;
}
button.enabled {
background-color: #4CAF50;
cursor: pointer;
}
</style>
</head>
<body>
<h3>Enable Button on All Fields Completion</h3>
<input type="text" id="name" placeholder="Enter your name">
<input type="email" id="email" placeholder="Enter your email">
<button id="submit" disabled>Submit</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkFields() {
const allFilled = $('#name').val().trim() !== '' && $('#email').val().trim() !== '';
$('#submit').prop('disabled', !allFilled).toggleClass('enabled', allFilled);
}
$('input').blur(checkFields);
</script>
</body>
</html>
4. 힌트 텍스트 표시
입력 필드가 비어 있는 상태에서 포커스가 해제되면 힌트를 표시합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hint Example</title>
<style>
.hint {
color: gray;
font-size: 12px;
}
</style>
</head>
<body>
<h3>Hint Example</h3>
<input type="text" id="username" placeholder="Enter your username">
<p id="hint" class="hint">Hint: Your username should be 5-15 characters.</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#username').focus(function() {
$('#hint').show();
}).blur(function() {
if ($(this).val().trim() === '') {
$('#hint').show();
} else {
$('#hint').hide();
}
});
</script>
</body>
</html>
이러한 예제들은 다양한 상황에서 focus()와 blur() 이벤트를 실용적으로 사용할 수 있도록 도와줍니다. 필요에 따라 더 복잡한 로직을 추가하여 확장 가능합니다.
#jquery #focus() #blur() #event #입력필드강조및해제 #폼유효성검사표시 #버튼활성화조건 #힌트텍스트표시
반응형
'프로그램' 카테고리의 다른 글
| jQuery의 change() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.24 |
|---|---|
| jQuery의 keydown() / keyup() / keypress() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.23 |
| jQuery의 dblclick() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.21 |
| jQuery의 mouseenter() / mouseleave() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
| jQuery의 hover() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
댓글