다음 우편번호 검색 사용 시 필드에 포커싱이 안됩니다
본문
안녕하세요.
다음 우편번호 검색 아이프레임으로 끼워 넣기 방식으로 수정해 사용하려 합니다만,
다른건 잘 되는데 모바일에서만 2번째 주소 항목에 포커싱이 되지 않는 문제가 있습니다.
우편번호 검색이 표시될 wrap 엘리먼트를 아래와 같이 만들었습니다.
<script>
const parent = document.querySelector('#billing_postcode_find_field');
const billingField1 = document.querySelector('#woocommerce-input-wrapper');
const newDiv = document.createElement('div');
newDiv.setAttribute('id', 'wrap');
newDiv.style.cssText = 'display:none;border:1px solid #dddddd;width:100%;height:500px !important;margin:5px 0;position:relative;overflow:hidden;'
parent.insertBefore(newDiv, billingField1);
</script>
그리고는 아래의 코드를 이용해 우편번호 스크립트를 넣었습니다.
<script>
var element_wrap = document.getElementById('wrap');
function foldDaumPostcode() {
element_wrap.style.display = 'none';
}
function openDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
document.getElementById('billing_postcode').value = data.zonecode;
document.getElementById('billing_address_1').value = data.address;
element_wrap.style.display = 'none';
// 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
if (matchMedia("screen and (min-width: 1024px)").matches) {
document.getElementById('billing_email').scrollIntoView({behavior: 'smooth'});
} else {
// 1024px 미만에서 사용할 JavaScript
document.getElementById('billing_email').scrollIntoView({behavior: 'smooth'});
}
document.getElementById('billing_address_2').focus();
},
onresize : function(size) {
element_wrap.style.height = size.height+2+'px';
},
width : '100%',
height : '100%',
maxSuggestItems : 5,
useBannerLink : false
}).embed(element_wrap);
// iframe을 넣은 element를 보이게 한다.
element_wrap.style.display = 'block';
}
</script>
그리고 마지막 부분에
document.getElementById('billing_address_2').focus();
billing_adress_2 필드에 포커싱을 적용했습니다만... 아이폰에서 테스트 했을때 이상하게 포커싱이 안됩니다 ㅠㅠ
혹시 제가 잘못한 점이 있다면 조언을 듣고 싶습니다.
감사합니다.
답변 1
그누 소스를 보면
setTimeout(function(){
of[frm_addr2].focus();
} , 100);
해당으로 시간차를 두고 포커스를 주네요 참고해보세요.
답변을 작성하시기 전에 로그인 해주세요.
