비전공개미 개발노트
HTML/JavaScript - 숫자만 입력하기 / 다음우편번호 서비스 본문
반응형
SMALL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="html5">
<meta name="author" content="kim young">
<title></title>
<style>
* { font-size: 16pt; }
a { font-size: 26pt; text-decoration: none; color: blue; }
</style>
<script>
function nullCheck() {
a = document.myform.code.value;
if( a=="" || a == null){
alert("코드데이터 필수입력사항입니다 ") ;
myform.code.focus();
return false;
}else{myform.title.focus(); }
// size = myform.code.value.length ;
// if( size != 6 ){
// alert('code자릿수는 6자리입니다 ');
// myform.code.value="";
// myform.code.focus();
// return false;
// }
b = document.myform.title.value;
if( b=="" || b == null){
alert("제목데이터 필수입력사항입니다 ") ;
myform.title.focus();
return false;
}
c = document.myform.addr1.value;
d = document.myform.addr2.value;
if(c =="" || d== ""){
alert("주소를 입력해주세요");
myform.addr2.focus();
return false;
}
//document.myform.submit();
}//end
function codeCheck(e){
data = document.myform.code.value;
size = document.myform.code.value.length;
//숫자keyCode만 찾기
if((event.keyCode >= 48) && (event.keyCode <= 57) || (event.keyCode >= 96) && (event.keyCode <= 105)|| event.keyCode == 190 || event.keyCode == 110 || event.keyCode == 8){
//code에서 6자리 미만이면 id="warning"을 보여주고 6자리 이하면 숨긴다
if(size < 6){
document.getElementById("warning").style.display = "";
}else{
document.getElementById("warning").style.display = "none";
}
return true;
}else{
alert("숫자만 입력해주세요");
document.myform.code.value = "";
return false;
}
}//end
</script>
</head>
<body>
<font color='blue'><b> input코드 숫자만 입력하기 / 다음우편번호 서비스 </b></font> <br>
<form name="myform">
코드: <input type="text" name="code" size="10" onkeyup="codeCheck();">
<span id="warning" style="font-size: 10pt; color: red; display:none;">* 아이디를 6자리이상 입력해주세요</span>
<br>
제목: <input type="text" name="title" size="10"> <br>
메일: <input type="email" name="email" size="10" required autofocus> <br>
주소: <br>
<!-- 카카오 우편번호 시작 -->
<input type="text" id="postnum" placeholder="우편번호" size="7">
<input type="button" name="addrbtn" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="addr1" name="addr1" placeholder="주소" ><br>
<input type="text" id="addr2" name="addr2" placeholder="상세주소">
<!-- <input type="text" id="sample6_extraAddress" placeholder="참고항목"> -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
//document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
//document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('postnum').value = data.zonecode;
document.getElementById("addr1").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("addr2").focus();
}
}).open();
}
</script>
<br>
<input type="button" value="저 장" onclick="nullCheck();">
<input type="reset" value="취 소">
</form>
</body>
</html>
다음 우편번호 서비스를 참고해서 예제코드를 붙여넣은 후 id를 매칭해주면 사용이 가능하다.
사용량에 제한이 없으며 기업용, 상업용으로 사용이 가능함
다음 우편번호 서비스 홈페이지 참고 https://postcode.map.daum.net/guide
반응형
LIST
'프론트엔드 > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열을 불러와 박스색상 변경하기 (0) | 2022.10.06 |
|---|---|
| [JavaScript] Date, String, Math, 사용자 객체 (0) | 2022.10.05 |
| [JavaScript] 배열선언, 배열출력, $.each (1) | 2022.10.05 |
| [JavaScript] prompt창으로 입력, switch문 활용 (0) | 2022.10.05 |
| 자바스크립트 return false일때 입력값 새로고침 안되게 (0) | 2022.10.04 |
Comments