2008.06.10 15:12
소스1.
var input = document.createElement("input");
input.setAttribute("type", "text");
document.body.appendChild(input);

소스1. 적용 이후 다음 소스가 적용되지 않는다.. IE 에서만 ^^;

소스2.
input.setAttribute("type", "password");

IE 에서 나타나는 에러 메시지는 "이 명령은 지원하지 않습니다."

물론, setAttribute 메소드를 사용하지 않고 input.type = "..."; 로 적용시켜도 에러가 남.

FF2, Opera9, Safari3 에서는 정확히 잘 동작한다. IE6, IE7, IE8 beta1 에선 에러가 난다..


프로젝트에서는 아래와 같은 코드로 대체했다
 
if (Prototype.Browser.IE) {
    var outerHTML = this._input.outerHTML;
    outerHTML = outerHTML.replace(/type=[a-z]*/, "");
    outerHTML = outerHTML.replace(/value=""/, "value=\""+this._getText()+"\"");
    // IE 에서는 한번 지정된 type을 변경할 수 없어서 새로운 Element 를 만들어야 함.
    // IE 에서 password 타입의 텍스트 박스는 outerHTML 에서 value 값이 나타나지 않아서 다시 넣어줘야함.
    var newInput = document.createElement(outerHTML);
    if (this._getPassword()) {
        newInput.setAttribute("type", "password");
    }
    this._input.parentNode.replaceChild(newInput, this._input);
   
    //이벤트등록해제 등등 reference value 에 관련된 모든 것들 해제
    //...
    this._input = newInput;
    //...
    //이벤트등록 등등 reference value 에 관련된 모든 것들 재등록
}
else {
    this._input.setAttribute("type", this._getPassword()? "password": "text");
}

ps. 이벤트 등 element 값 자체를 등록시켜놓은 부분에 대해 수정이 반드시 필요하다.

참고로 이 문제의 다른 해결 방법이 없는지.. 구글을 찾아보니 역시나 비슷한게 있었다
http://codingforums.com/showthread.php?t=107073
Change input type="text" to input type="password"

Code:
<script type="text/javascript">
function passit(ip){
var np=ip.cloneNode(true);
np.type='password';
if(np.value!=ip.value)
np.value=ip.value;
ip.parentNode.replaceChild(np,ip);
}
</script>

<form id="login" action="#" method="post">
<input id="username-field" type="text" name="username" title="Username" onmousedown="javascript:this.value=''; javascript:this.focus();" value="Username" tabindex="1" />
<input id="password-field" type="text" name="password" title="Password" onmousedown="javascript:this.value=''; passit(this.form[0]); javascript:this.focus();" value="Password" tabindex="2" />
<input type="submit" name="submit" value="sign in" tabindex="3" />
</form>


나도 처음에 cloneNode 메소드를 생각했었는데, 사용하지 않았다..
이유는 type="text" 인 input 을 type="password" 로 변경은 가능하지만..
반대로는 불가능했기 때문이다. -ㅁ-
어째뜬..
IE does not like to change dynamically the type, thus one solution might be to replace entirely the object.
신고
Posted by 아즈키

댓글을 달아 주세요