코딩(Coding)
[자바스크립트] PhoneNumber/휴대폰 번호/연락처 양식 자동으로 설정해주는 방법
Ghomdori
2020. 7. 16. 13:48
안녕하세요.
오늘은 프로필정보나 나의 정보 페이지 중에
연락처/전화번호/휴대폰 번호를 입력시 자동으로 양식을
해주도록 할 수 있는 방법을 소개해드려고 합니다.
아래 코드를 <Body></body>안에 삽입한 후
<input type="text" id="phone_num" maxlength="13" placeholder="Phone Number"><script></script>안에 아래 코드블럭 내용을 삽입해줍니다.
Jquery를 사용한 방식입니다.
<script type="text/javascript">
$(function(){
$('#phone_num').keydown(function(event) {
var key = event.charCode || event.keyCode || 0;
$text = $(this);
if (key !== 8 && key !== 9) {
if ($text.val().length === 3) {
$text.val($text.val() + '-');
}
if ($text.val().length === 8) {
$text.val($text.val() + '-');
}
}
return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
});
});
</script>jquery 는 아무거나 사용하셔도 상관없습니다.
저는
<head></head> 부분에
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>해당 소스를 넣어서 jquery를 사용할 수 있도록 하였습니다.
이렇게 하시면 "phone_num" 이라는 input에 01012345678 을 입력하시면
010-1234-5678로 알아서 변하게 됩니다.
끝!