주민등록번호 앞자리를 입력한 후 다음 입력 상자로 자동으로 이동하는 예제를 jQuery를 사용하여 작성하겠습니다.
1. HTML 마크업 작성:
두 개의 입력 상자를 추가하고, 주민등록번호 앞자리와 뒷자리를 입력할 수 있도록 합니다.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>주민등록번호 자동 이동 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="ssnFirstPart" maxlength="6" size="6" placeholder="앞자리"> -
<input type="text" id="ssnSecondPart" maxlength="7" size="7" placeholder="뒷자리">
<script>
$(document).ready(function() {
$('#ssnFirstPart').on('input', function() {
if ($(this).val().length == $(this).attr('maxlength')) {
$('#ssnSecondPart').focus();
}
});
});
</script>
</body>
</html>
```
위 코드에서 `input` 이벤트를 사용하여 주민등록번호 앞자리 입력 상자의 값이 변경될 때마다 이벤트 핸들러를 실행합니다. 주민등록번호 앞자리 입력 상자의 값의 길이가 최대 길이(6자리)와 같은 경우, 주민등록번호 뒷자리 입력 상자로 포커스를 이동시킵니다.
이제 주민등록번호 앞자리를 입력하면 자동으로 다음 입력 상자인 뒷자리로 이동합니다.
'개발' 카테고리의 다른 글
| PHP 메모리 무제한 설정하는 방법 (Out of Memory 에러 오류 해결) (0) | 2023.05.06 |
|---|---|
| CodeIgniter 3에서 결제 후 세션 초기화 문제 해결 방법 (0) | 2023.05.05 |
| Java로 HTTP에서 HTTPS로 리다이렉트하는 방법 (0) | 2023.05.05 |
| 코드이그나이터(CodeIgniter)에서 Ajax 요청 확인하는 방법 (0) | 2023.05.05 |
| php 엑셀 행높이 설정 방법 (0) | 2023.05.05 |
댓글