Gomdori

[자바스크립트] PhoneNumber/휴대폰 번호/연락처 양식 자동으로 설정해주는 방법 본문

코딩(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로 알아서 변하게 됩니다.

끝!

저작자표시 비영리 동일조건

'코딩(Coding)' 카테고리의 다른 글

Unsupported major.minor version 52.0  (1) 2020.09.01
[자바스크립트(JSP)] 네이버,카카오,구글 API 사용하여 SNS 로그인 추가하기.  (0) 2020.07.16
[Android App] 안드로이드 랜덤채팅(Random Chat) 프로젝트 판매합니다.  (0) 2020.07.15
[Android] android.view.InflateException: Binary XML file line #9: Error inflating class <unknown>  (0) 2020.06.24
[JAVA] String to int, int to String, String에서 int로, int에서 String으로 형변환  (0) 2020.06.24
'코딩(Coding)' Related Articles more
Comments