jQuery를 사용하여 하나의 입력 필드에 값을 입력하면 연관된 다른 필드가 자동으로 업데이트되도록 구현할 수 있습니다. 이를 위해 input 또는 change 이벤트를 활용할 수 있습니다.
예제 1: 입력 필드 값을 다른 필드에 자동 복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Update Fields</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="field1">Field 1:</label>
<input type="text" id="field1" placeholder="Type something">
<br><br>
<label for="field2">Field 2 (Auto-updated):</label>
<input type="text" id="field2" readonly>
</form>
<script>
// jQuery script for auto-updating field
$(document).ready(function() {
$('#field1').on('input', function() {
const value = $(this).val(); // Get value from field1
$('#field2').val(value); // Set value to field2
});
});
</script>
</body>
</html>
동작 설명
- HTML 구조:
- #field1: 사용자가 값을 입력하는 필드.
- #field2: 자동으로 업데이트될 필드(읽기 전용).
- jQuery 코드:
- $('#field1').on('input', ...): 사용자가 #field1에 입력하는 즉시 이벤트를 실행합니다.
- $('#field2').val(value): #field2에 #field1의 값을 복사합니다.
예제 2: 값 변환 후 연관 필드 업데이트
만약 입력값을 변환(예: 대문자로 변경)한 뒤 연관 필드에 반영하고 싶다면 다음과 같이 수정할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Update Fields</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="field3">Enter text (Lowercase):</label>
<input type="text" id="field3" placeholder="Type something">
<br><br>
<label for="field4">Uppercase (Auto-updated):</label>
<input type="text" id="field4" readonly>
</form>
<script>
$(document).ready(function() {
$('#field3').on('input', function() {
const transformedValue = $(this).val().toUpperCase(); // Convert to uppercase
$('#field4').val(transformedValue); // Set transformed value to field4
});
});
</script>
</body>
</html>
동작 설명
- 사용자가 #field3에 소문자로 입력하면, #field4에는 입력값이 자동으로 대문자로 변환되어 표시됩니다.
추가 기능: 여러 연관 필드 업데이트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Update Fields</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter name">
<br><br>
<label for="greeting">Greeting:</label>
<input type="text" id="greeting" readonly>
<br><br>
<label for="summary">Summary:</label>
<textarea id="summary" readonly></textarea>
</form>
<script>
$(document).ready(function() {
$('#name').on('input', function() {
const name = $(this).val();
$('#greeting').val(`Hello, ${name}!`); // Update greeting
$('#summary').val(`Name entered: ${name}\nGreeting: Hello, ${name}!`); // Update summary
});
});
</script>
</body>
</html>
동작 설명
- #name에 이름을 입력하면:
- #greeting에는 "Hello, [이름]!"가 표시됩니다.
- #summary에는 입력값 요약이 표시됩니다.
위의 예제는 다양한 상황에서 연관된 필드를 동적으로 업데이트하는 방법을 보여줍니다. 원하는 기능에 따라 이벤트(change, input)와 값을 가공하는 로직을 조합하여 응용할 수 있습니다.
#jquery #on #input #val #toUpperCase #textarea #연관필드업데이트
반응형
'프로그램' 카테고리의 다른 글
| JavaScript의 배열 메서드 pop() (0) | 2024.12.11 |
|---|---|
| jquery join()에 대한 설명과 예제 (0) | 2024.12.09 |
| jquery 파일 업로드 시 선택된 파일 이름 표시 (0) | 2024.12.05 |
| jquery 다중 선택 박스 값 출력 (0) | 2024.12.03 |
| jquery 텍스트 필드 값 변경 시 유효성 검사 (0) | 2024.12.01 |
댓글