우편번호input 질문입니다.

우편번호input 질문입니다.

QA

우편번호input 질문입니다.

본문

2949052011_1528729315.2669.gif

 

.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 된 상태가 되어야하는대 어떻게 고쳐야하죠?

       

 

http://www.woodpack.co.kr/bbs/write.php?bo_table=estimate

이 질문에 댓글 쓰기 :

답변 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].value = data.zonecode;
of[frm_zip].style.backgroundImage = "url('')";
        of[frm_addr1].value = fullAddr;
        of[frm_addr3].value = extraAddr;

적용하니 원하던 결과가 나왔습니다. 하지만
글 수정을 누르면 우편번호라는 글자가 그대로 있습니다ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 47
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT