우선 이문제는 현재
IE8에서만 나타나는 현상이다. 개인적으로 이 현상말고도
ie8에서 여러가지 버그들이 나타나고 있는데 명확한 확인이 필요한것 같아서 일단 이부분만 우선 포스팅하려 한다. 향후 패치되면서 버그가 수정될지는 모르겠지만...
HTML에서
form태그는 매우 기본적인 요소이다.
이 요소는
HTML의 시작과 함께 등장한 가장 기본적인 요소이다.
defined in HTML 3.2 
and World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1 . form엘리먼트의 특징중 하나는 input type에 값을 입력하고 나서 별도의 submit버튼을 클릭하지 않아도 자동으로 기본 submit처리가이루어진다는 데 있다.
하지만
IE8에서는 이부분이 문제가 된다. 문제가 되는 내용은 대략 3가지 조건이다.
1. submit 버튼을 탑재하지 않았을경우.
<form onsubmit="alert('Why not?'); return false;">
<input type='text' name='id'>
<input type='password' name='pw'>
</form>
input type에
password가 포함되었을경우 이경우 폼에서 엔터를 입력했을때
submit은 동작되지 않는다.
만약
password가 존재하지 않으면 동작된다.
(물론 이부분은 다른브라우져는 동작되지만 IE7 브라우져에서도 해당되는 사항이긴 하다.)
2.submit 버튼을 탑재했을 경우.
<form onsubmit="alert('Why not?'); return false;">
<input type='text' name='id'>
<input type='password' name='pw'>
<input type='submit'>
</form>
이제 폼에서 엔터를 입력했을때 자동
submit이 이루어진다.
3.submit 버튼을 탑재하고 상위 컨테이너의 style의 display:none에서 block으로 바뀔경우
이 부분이 이제 매우 중요한 경우인데... 실제
form은 대부분 단독으로 처리하지 않는다. 대부분
div나 다른 엘리먼트로 감싸게 될것이다.
일단 DTD 선언을 하지 않겠다.
<html>
<body>
<div id='formDiv' style=
'display:none;'>
<form onsubmit="alert('Why not?'); return false;">
<input type='text' name='id'>
<input type='password' name='pw'>
<input type='submit'>
</form>
</div>
<button onclick="document.getElementById('formDiv').style.display='block';">show bug</button>
</body>
</html>
버튼을 클릭하여
formDiv를
display시킨후
form의 값을 입력후 엔터키를 실행했을때 동작에 전혀 문제가 되지 않는다.
문제가 전혀 없다. 즉
formDiv의
display속성이 페이지가 로드되는 시점에
none이던
block이던 전혀 문제가 안된다는 말...
이제 DTD 선언을 해보겠다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id='formDiv' style=
'display:none;'>
<form onsubmit="alert('Why not?'); return false;">
<input type='text' name='id'>
<input type='password' name='pw'>
<input type='submit'>
</form>
</div>
<button onclick="document.getElementById('formDiv').style.display='block';">show bug</button>
</body>
</html>
확실한 버그다.
이번엔 초기
formDiv 의 style display속성을 block으로 해보자. 동작에 문제가 전혀없다.
이제 다시 display:none으로 두고 1번에서 이 문제의 근원이 되었던 input type='password' 를 없애보자.
동작에 역시 문제가 없다.
이상의 테스트에서
IE8은 확실히
form 요소와 관련된 버그문제가 심각하다는 것을 알수 있다.
대부분
password 타입과 관련된 것이지만 1번의 경우
submit 버튼이 포함되지 않았다고 해서 동작이 되지 않는것도 그렇고...
마지막
3번의 경우는 정말 치명적인 사항이다.
따라서 브라우져가
ie8일 경우만 체크해서
fix 해주는 부분이 필요하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<body>
<div id='formDiv' style='display:none;'>
<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>
<form onsubmit="alert('Why not?'); return false;" onkeydown="ie8SubmitFIX(event, this);">
<input type='text' name='id'>
<input type='password' name='pw'>
<input type='submit'>
</form>
</div>
<button onclick="document.getElementById('formDiv').style.display='block';">show bug</button>
</body>
</html>
[수정된 최종 코드]
도대체 AcidTest2를 통과한것과 견주어 ie7에 비해서 나아진것이 어떤게 있는지 개인적으로 의문이다.
페이지 로딩은 이전 버젼에 비해 더 빨라졌는지 모르겠지만 스크립터 실행속도도
ie7에 비해서 오히려
더 느려진 느낌이랄까...
LINK • SUMMARY
Share related link.
A Platform Evangelist Lee Brimelow's blog at Adobe.
1
- 
- 