우편번호input 질문입니다.
본문
.input_blur {background: url(./img/ex_zipbg.jpg); height:40px;width:59px; border:1px solid #cccccc;}
.input_focus {background: url(./img/ex_zipbgfocused.jpg); color: #000;height:40px;width:59px; border:1px solid #cccccc;}
.input_change {background: url(./img/ex_zipbgfocused.jpg); height:40px;width:59px; border:1px solid #cccccc;}
.inpstyle {background: url(./img/ex_zipbg.jpg); height:40px;width:59px; border:1px solid #cccccc;}
<input onChange="this.className='input_change'" onFocus="this.className='input_focus'" onBlur="if ( this.value == '' ) { this.className='input_blur' }" tabindex="12" type="text" name="ex_zip" value="<?php echo $ex_zip; ?>" id="ex_zip" class="inpstyle input_focus input_blur frm_input" size="7" maxlength="6" required>
<button tabindex="13" type="button" class="btn_frmline" onclick="win_zip('fwrite', 'ex_zip', 'ex_addr1', 'ex_addr2', 'ex_addr3', 'ex_jibeon');">주소 검색</button>
input창에 마우스를 클릭하면 focus 가 되어 우편번호라는 글자가 적힌 이미지가 사라집니다.
input창을 빠져나와 다른 곳을 클릭하면 blur가 적용됩니다. 우편번호라는 글자 이미지가 나타납니다.
질문)우편번호 검색 버튼을 누른 후 주소선택하면 우편번호라는 글자 이미지가 그대로 있습니다.
이 때 focus 된 상태가 되어야하는대 어떻게 고쳐야하죠?
답변 2
문제의 근본 원인은 프로그램에 의해 value 가 change 된 경우에는 onchange 이벤트가 발생하지 않습니다.
/js/common.js 422 Line
of[frm_zip].value = data.zonecode;
방법 1) 간단하게 placeholder 를 사용합니다. (권장)
<input onChange="this.className='input_change'" onFocus="this.className='input_focus'" onBlur="if ( this.value == '' ) { this.className='input_blur' }" tabindex="12" type="text" name="ex_zip" value="" id="ex_zip" class="inpstyle input_focus input_blur frm_input" size="7" maxlength="6" required>
->
<input placeholder="우편번호" tabindex="12" type="text" name="ex_zip" value="" id="ex_zip" class="frm_input" size="7" maxlength="6" required>
or
방법 2) /js/common.js 파일에서 classname 까지 변경해줍니다. (권장 X)
of[frm_zip].value = data.zonecode;
->
of[frm_zip].value = data.zonecode;
of[frm_zip].className = 'input_change';
캐시 갱신을 위해
/extend/version.extend.php 에서 G5_JS_VER 의 버전명 숫자를 갱신해줍니다.
답변 감사합니다. 두 번째 방법으로 해결했습니다.
두 번째 방법을 사용하는 이유는 IE8때문입니다.
하지만
글을 등록 후에 수정을 누르면 우편번호 글씨가 그대로 남아있습니다.
이 부분도 수정이 가능한가요? 알려주시면 감사드립니다.
그래서 첫번째 방법을 권장하는 것입니다. placeholder 는 브라우저에 의해 자동으로 판단되어, 안내 메시지 처리가 되기 때문입니다.
placeholder 방식을 사용하지 않는 경우에는,
class="inpstyle input_focus input_blur frm_input"
을 다음과 같이 수정하면 될 듯 합니다.
->
class="<?php if ($w != "u") { ?>inpstyle input_focus input_blur<?php } ?> frm_input"
원하는 결과로 적용되었습니다. 감사합니다.
그런데 제가 궁금한점이 있습니다;
class="<?php if ($w != "u") { ?>inpstyle input_focus input_blur<?php } ?> frm_input"
이 소스에서
w와 u는 뭐를 가르키는거죠?
w가 u와 같지 않다면 class를 실행하라는거 같은데요
궁금합니다.
$w 는 등록 모드인지, 수정모드 인지를 가리키는 그누보드에서 사용하는 변수입니다.
글등록시에 $w 는 빈 값이고,
글수정시에 $w 는 'u' (update) 값을 갖도록 되어 있습니다.
if ($w != "u") 는 '현재 페이지가 글수정 페이지가 아니라면'의 의미입니다.
질문이 많았는데 다 답변해주셨습니다.
답변 정말 감사드립니다. 좋은 하루 되세요.
/js/common.js 파일에서
var win_zip = function(frm_name, frm_zip, frm_addr1, frm_addr2, frm_addr3, frm_jibeon) {
이 부분 밑에
of[frm_zip].style.background = "";
of[frm_addr2].focus();
빨간색 부분 추가해 보세요.
답변 감사드립니다.
393번째 줄 바로 밑에
var win_zip = function(frm_name, frm_zip, frm_addr1, frm_addr2, frm_addr3, frm_jibeon) {
of[frm_zip].style.background = "";
이렇게 적용하고 확인하니 주소검색창이 안열립니다;;
var win_zip = function(frm_name, frm_zip, frm_addr1, frm_addr2, frm_addr3, frm_jibeon) {
of[frm_zip].style.background = "";
of[frm_addr2].focus();
이렇게도 해보았으나 안열립니다.
of[frm_zip].style.backgroundImage = "url('')";
이렇게 바꿔 보세요.
of[frm_zip].value = data.zonecode;
of[frm_zip].style.backgroundImage = "url('')";
of[frm_addr1].value = fullAddr;
of[frm_addr3].value = extraAddr;
적용하니 원하던 결과가 나왔습니다. 하지만
글 수정을 누르면 우편번호라는 글자가 그대로 있습니다ㅠ
