레이아웃을 사용하다보면 IE8에서 로그인 입력창에 아이디와 패스워드를 입력 후 엔터를 눌러도 작동하지 않고 꼭 Submit 버튼을 눌러야 작동하는 경우가 있습니다. IE8 버그로서 로그인 관련 코드를 찾아 수정해줌으로서 문제를 해결할수 있습니다. 아래는 PXE Official Layout의 코드지만 다른 레이아웃도 거의 똑같은 코드를 사용하므로 참고하여 관련 문제를 해결해 주세요.
1. layout.html을 열고 아래의 코드를 변경해주세요. 빨간색 코드는 삭제하시고 파란색 코드는 변경된 부분이니 복사해서 붙여 넣어주세요. 자바스크립트 관련 부분이 삭제되고 input 프로퍼티가 button 프로퍼티로 변경된 것 입니다.
<script type='text/javascript'>
function ie8SubmitFIX(e, f) {
if(navigator.appVersion.indexOf("MSIE 8") == -1) return;
var t = e.target || e.srcElement;
if(t) {
if(e.keyCode==13 && t.tagName.toLowerCase() != 'textarea' ) return f.onsubmit();
}
}
</script>
<div class="inner">
<form action="" method="post" id="commonLogin" onsubmit="return procFilter(this, login)" onkeydown="ie8SubmitFIX(event, this);">
<input name="user_id" type="text" class="id" id="uid" value="" onFocus="this.style.backgroundImage='none';" />
<input name="password" type="password" class="password" id="upw" onFocus="this.style.backgroundImage='none';" />
<button type="submit" value="submit" class="submit">SUBMIT</button>
<div class="saveIDinfo">
<input name="keep_signed" type="checkbox" id="keepA" value="Y" class="inputCheck" onclick="if(this.checked) return confirm('{$lang->about_keep_signed}');"/>
<label for="keepA">{$lang->keep_signed}</label>
</div>
</form>
</div>
<!--@if($member_config->enable_openid=='Y')-->
<div class="inner">
<div class="oid_desc"><img src="img/{$layout_info->colorset}/oid_desc.gif" alt="오픈아이디" /></div>
<form action="./" method="post" id="openidLogin" onsubmit="return procFilter(this, openid_login)" onkeydown="ie8SubmitFIX(event, this);">
<input name="openid" type="text" class="oid" id="oid" onFocus="this.style.backgroundImage='none';" />
<button type="submit" value="submit" class="submit_oid">SUBMIT</button>
</form>
</div>
<!--@end-->
2. CSS 파일을 수정해줍니다. PXE Official Layout의 경우에는 layout.css를 제외한 모든 컬러셋 CSS 파일을 수정해야 합니다. 다른 레이아웃의 경우에는 layout.css 혹은 default.css만 수정하면 됩니다. 아래의 코드를 찾아 변경해 줍니다. 파란색으로 된 부분이 변경되거나 추가된 부분입니다.
CSS 파일 수정
.loginWindow .loginLayer button.submit_oid { width:52px; height:22px; background:url(../img/cyan/login_btn_submit.gif) no-repeat; border:none; margin:0; cursor:pointer; position:absolute; top:0px; left:166px; text-indent:-1000em; }
.loginWindow .loginLayer button.submit { width:52px; height:22px; background:url(../img/cyan/login_btn_submit.gif) no-repeat; border:none; margin:0; cursor:pointer; position:absolute; top:27px; left:166px; text-indent:-1000em; }
주의 : 만일 관리자의 레이아웃 편집등의 메뉴에서 레이아웃 코드를 변경한 적이 있던 분들은 레이아웃 편집창에 있는 코드도 수정해 주어야 합니다. 레이아웃 편집창에서 수정된 내용이 있는 레이아웃은 layout.html 파일의 코드를 변경하더라도 초기화 버튼을 누르지 않는 이상 적용되지 않습니다.
위의 패치 내용이 잘 이해가 안되시는 분들은 아래의 링크를 참조하여 diver님의 내용을 확인하시기 바랍니다.
http://www.premiumxe.com/39148