요새 난 정신없는 javascript 질을 하고 있는중
나의 동반자 prototype 과 함께.. FF vs IE 와 Opera, Netscape.. 전전긍긍-_-..
지나간 이야기이지만, 그냥 삽질 했던 것 자취를 남긴당
참고로 테스트 환경은 다음과 같다 =_=
Firefox 2.0, Internet Explorer 6.0, Opera 8.5, Netscape 8.1 - on windowsXP
DOM 에서 뭔가 엘리멘트를 만들때 이런 것을 주로 쓴다
createElement(String tagName) : static HTML Element
예를 들면 다음과 같다
var testInputElement = createElement('input');
그리고 속성들을 지정할때는
testInputElement.value = 'korea';
testInputElement.type = 'text';
등과 같이 Element 의 멤버들에 접근하면 된다. (setAttribute 를 이용해도 되고)
이렇게 한 결과는 다음과 같다
<input value='korea' type='text'>
암튼 문제는 이런 것이다..
원래 라디오 버튼 사용은 다음과 같이 한다
<input type='radio' name='onandoff' value='on'>
<input type='radio' name='onandoff' value='off'>
위와 같이 name 속성을 똑같은 것으로 지정하면 서로 관계를 갖게 되고, 베타적으로 작동(선택)을 할 수 있다
여기서, 위의 라디오버튼들을 생성해보자 (createElement 를 이용해서)
var radio1 = document.createElement('input');
var radio2 = document.createElement('input');
radio1.type = radio2.type = 'radio';
radio1.name = radio2.name = 'onandoff';
radio1.value = 'on';
radio2.value = 'off';
자 댔다 ㅋㅋ (조심해서 썼으나 틀렸을 수도 있음)
근대 문제가 있다 IE에서!
FF에서는 전혀 문제가 없다 (물론 그를 기반한 넷츠도 문제 없고 오페라 물론 괜찮다)
이상하게도 IE에서는 radio 버튼 생성을 저런식으로 하면 안된다
type 속성까지는 적용되지만 name 속성을 적용한 것이 동작하지 않는다 (일시적인 문제인 것인지 확인해 보기 위해 다른 이벤트를 동작시켜서 name 속성을 변경시켜봤지만 마찬가지였다)
실제로 appendChild 등을 통해 화면에 뿌려보면 name 없는 radio 버튼 처럼 작동을 한다
(베타적인 선택을 하지 못할 뿐만 아니라 아예 선택이 되지 않는다)
MSDN에 따르면, 우리는 이런식으로 라디오 버튼을 생성해야만 한다
var radio1 = document.createElement("<input type='radio' name='onandoff' value='on'>");
var radio2 = document.createElement("<input type='radio' name='onandoff' value='off'>");
오, 뭔가 이런식으로도 만들 수 있구나.. 앞으로도 그냥 이런식으로 만들면 되겠구나.
라고 생각했었다 처음엔..
물론 다른 엘리멘트들도 이런 식으로 생성이 가능하다.
그런데 문제는.
W3C DOM 스펙에 맞지 않는다는 것이다
The W3C DOM spec is supposed to be "the name of the element type to instantiate" (e.g., createElement('input'))
심지어 FF에선 작동하지 않고
Raises an INVALID_CHARACTER_ERR error if the specified name contains an illegal character.
throw 한다..
이밖에 IE..에 실망한 많은 경우들을 열거하면서 불평하고 싶지만.. 일단 해결책을 찾아보자.
내가 이 문제에 대해 사용햇던 방법은 다음과 같다 (try ~ catch)
try {
var radio1 = document.createElement("<input type='radio' name='onandoff'>");
var radio2 = document.createElement("<input type='radio' name='onandoff'>");
}
catch (e) {
var radio1 = document.createElement('input');
var radio2 = document.createElement('input');
radio1.type = radio2.type = 'radio';
radio1.name = radio2.name = 'onandoff';
}
radio1.value = 'on';
radio2.value = 'off';
음 FF, IE, Opera, Netscape에서 제대로 동작하는걸 확인했는데
버전 따라서 안될지도 모르겠고, Safari에서는 확인해보지 못했다.
다른 방법으로는 애초에 appendChild 메소드를 사용 안하고 innerHTML 속성을 사용하는 방법도 있다
ps. 여담이지만..
radio button 속성중 베타적 선택을 가능케하는 name 이 없을 경우..
각각의 브라우저가 다르게 반응한다 -.-
IE6: 위에도 적었지만 아예 선택(checked)자체가 되지않는다
FF2: 한개 한개 다르게 선택이 된다, 즉 4개를 만들면 4개다 선택이 가능하다.
Opera8: 마치 name이 없는 것으로 그룹화된 것 처럼 정상적으로 베타적 작동(선택)을 한다
