kakao 우편번호 API 사용
우편번호 검색창 페이지
html script 태그 작성
<body>
<input type="text" class="w-xl" placeholder="동, 면, 읍" name="address_display" readonly="readonly"
id="address_text">
<button type="button" class="btn-sm" name="btn-address">주소검색</button>
<p class="sb-addr">
<input type="text" class="w-xl" placeholder="상세주소" name="street_number" id="address_detail">
</p>
</body>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>typescript 작성
$('button[name=btn-address]').click(function() {
let daum = window['daum'];
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분
var address: string = '';
if (data.userSelectedType === 'R') {
address = data.roadAddress;
} else {
address = data.jibunAddress;
}
(<HTMLInputElement>document.getElementById('address_text')).value = address;
(<HTMLInputElement>document.getElementById('address_detail')).focus(); // 커서를 상세주소 필드로 이동
}
}).open();
});'typescript' 카테고리의 다른 글
| attr() 문법 (0) | 2021.03.13 |
|---|---|
| input box 자동 포커스 (0) | 2021.03.13 |
| File API (0) | 2021.03.13 |
| typescript jquery .on() (0) | 2021.03.13 |
| window 객체 (0) | 2021.03.13 |
