input要素のtype属性を変えたい

解決済

質問者：taku17
質問日時：2008/11/10 14:31
回答数：2件

携帯サイトのパスワード入力フォームで、最後に入力した1文字だけ表示し、他をマスクするというものがあり、面白いなと思ってPCサイト用にJavascriptで作ってみようと思いました。HTML部に

<input type="password" id="pass" />

と書き、初期設定としてJavascript部に

window.onload = function()
{
　　var input = document.getElementById("pass");
　　input.type = "text";
　　input.onkeydown = 実装する関数;
}

と書いています。これはHTMLにイベントハンドラを設定したくない（HTMLとJavascriptを分離させたい）からです。type属性がpasswordだとどうやっても文字は見えないので、textに変えてキーが押されるごとに最後の文字以外をマスクしてvalueに挿入する方法を考えていますが、これがうまくいきません。どうやらtype属性は値を取得することは可能ですが、挿入（置き換え）することはできないようなのです（ここでエラーが起こっているようです）。他に

input.removeAttribute("type");
input.appendAttribute("type", "text");

といったやり方も試してみましたが、うまくいきませんでした。
これは仕様で、どうやっても無理なのでしょうか？

<input type="password" /> を <input type="text" /> に変えれば対処できる問題ですが、Javascript不使用ユーザーにも対応できるようにしたいので、なんとか<input type="password" />形式のまま解決できませんでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2008/11/10 15:25

携帯に関してはよくわかりませんが・・・

タグを作成し直すとか、あるいはタグごと置き換えてしまえばよいのでは？

<html>
<head>
<script type="text/javascript">
function hoge() {
var e=document.getElementById('pass');
e.outerHTML='<input type="text" id="pass" value="test">';
}
</script>
</head>

<body>
<input type="password" id="pass">
<p><button onclick="hoge()">書換え</button>
</body>
</html>