전화번호 입력 자바스크립트 1가지: 숫자만 입력, 자동 하이픈(-)추가, 010- 입력 자동

전화번호 입력 자바스크립트를 챗봇을 이용해 구현해 봤습니다. 간단하면서 다양한 기능을 해 바로 기록형으로 포스팅 들어 갑니다. 필요하신 분들은 참고 하세요. 참고로 부트스트랩을 주로 이용하고 있어 다른 환경에서는 수정이 필요 할 수 도 있습니다.

전화번호 입력 자바스크립트 – HTML

<!-- HTML -->
<div class="input-group">
    <span class="input-group-text"><i class="bi bi-telephone"></i></span>
    <input type="tel" class="form-control" id="phoneNumber" placeholder="번호만 입력" required>
</div>

자바스크립트

<!-- JavaScript -->
<script>
const phoneInput = document.getElementById('phoneNumber');

phoneInput.addEventListener('input', function(e) {
    // 숫자만 추출
    let value = e.target.value.replace(/[^\d]/g, '');
    
    // 11자리로 제한
    if (value.length > 11) {
        value = value.substring(0, 11);
    }
    
    // 포맷팅된 값 생성
    let formattedValue = '';
    if (value.length <= 3) {
        formattedValue = value;
    } else if (value.length <= 7) {
        formattedValue = value.substring(0, 3) + '-' + value.substring(3);
    } else {
        formattedValue = value.substring(0, 3) + '-' + 
                        value.substring(3, 7) + '-' + 
                        value.substring(7);
    }
    
    // 입력 필드 업데이트
    e.target.value = formattedValue;
});

// 입력 시작 시 자동으로 010- 추가
phoneInput.addEventListener('focus', function(e) {
    if (!e.target.value) {
        e.target.value = '010-';
    }
});
</script>

기능 설명

• 숫자만 입력 가능 (그 외 문자는 자동 제거)
• 최대 11자리로 제한
• 자동 하이픈(-) 추가: 010-0000-0000 형식
• 포커스 시 자동으로 ‘010-‘ 입력
• 부트스트랩 디자인 적용된 입력 필드

사용 예

• 사용자 입력: 01012345678
• 자동 변환: 010-1234-5678

위 글은 블로그의 ‘Web‘ 카테고리로 분류되었으며, 관련된 글을 더 많이 참고할 수 있습니다.