最近、少しずつJavaScriptを好きになっていた気がしましたが、気のせいだったかもしれません。

次のようなコードを書きました。チェックボックスをON/OFFすると、テキストボックスのパスワードモードを切り替えるだけの簡単なコードです。

<div id="base">
 <input type="text" id="input_foo"/>
 <input type="checkbox" onclick="$('input_foo').setAttribute('type', this.checked ? 'password' : 'text');"/>
</div>

このコード、IEでは動きません(IE6では動きません。IE7は不明です)。

次のページを見ると、type属性を後から変更できないようです。

• http://msdn2.microsoft.com/en-us/library/ms534700.aspx

  As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.

IE5の制限事項と書いてありますが、手元のIE6で上記コードが動きません(エラーが起きます)。

結局、(元はたった1行のコードが)次のような仰々しいコードになってしまいました(最初、cloneNode()を使いましたが、ダメでした)。

function change(v) {
  var e = $('input_foo');
  if (Prototype.Browser.IE) {
    var base = $('base');
    var dup = document.createElement('input');
    dup.setAttribute('type', v ? 'password' : 'text');
    dup.setAttribute('value', e.value);
    dup.setAttribute('id', 'input_foo');
    base.replaceChild(dup, e);
  } else {
    e.setAttribute('type', v ? 'password' : 'text');
  }
}

もっと調べれば、マシな書き方が見つかるかもしれませんが、何を信じてよいのか分かりません。