• ベストアンサー

パスワード入力フォームのガイドの制作するには・・・?

入力フォームにデフォルト値でガイド的な文字を入れ フォームクリックでガイド文字が消え、入力できるようになるものを 作りたいのですが input type="text" のフォームはできましたが input type="password" のフォームに実装すると ガイド文字も●●●●と表示されてしまいます。 これを制作するのは無理なのでしょうか? 以下はサンプルで作ったソースです。 ------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> </head> <body> <div class="id_box"><input type="text" name="id" onfocus="if (this.value == 'アカウントID') this.value='';" value="アカウントID"></div> <div class="pw_box"><input type="password" name="pass" onfocus="if (this.value == 'パスワード') this.value='';" value="パスワード"></div> </body> </html> ------------------------------------------------------------------- たぶんjavascriptだと思うのですがよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

javascript DOM関数 element.setAttribute()を使ってはどうでしょう <script> <!-- function hide_pwd(pw){ if(pw == 'パスワード'){ document.getElementById("pwd").value =""; document.getElementById("pwd").setAttribute("type", "password"); } } // --> </script> <input id="pwd" type="text" name="pass" onfocus="javascript:hide_pwd(this.value);" value="パスワード">

testid
質問者

お礼

すばらしい回答ありがとうございます。 実装できました。 ちなみにキーボード入力が全角になっていても ID パスワード入力する時に強制的に半角入力にさせるなんてことは できないですよね^^;

その他の回答 (1)

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.2

>ちなみにキーボード入力が全角になっていても >ID パスワード入力する時に強制的に半角入力にさせるなんてことは >できないですよね^^; https://developer.mozilla.org/Ja/CSS:ime-mode そのくらいのことでしたら、というより、フォーム部品に対する表記は label 要素をお勧めします。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.9 ================================================================== 以下蛇足 ・スクリプトの type 属性は必須 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/scripts.html#h-18.2 ・get|setAttribute についての IE 問題 http://nanto.asablo.jp/blog/2005/10/29/123294 通常は、各 interface に用意されたプロパティを使うようにすると、上のような制約を受けなくてすみます。 ただし、type プロパティは DOM Level 1 の時点では読み取り専用です。 http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-6043025 http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025 ・javascript: ラベルについて。 http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=1941 (リンク先の質問内容は今回とは関係ありませんが、ラベルについては参考になります)

testid
質問者

お礼

回答ありがとうございます。 とても参考になりました。 また何かあった時にはよろしくお願い致します。

関連するQ&A

専門家に質問してみよう