Code × Cross

サイトにログインする時にパスワード入力するとこありますよね。

その中に薄くパスワードって書いてあったりします。

今作ってるサイトでそれやろうと思って、普通のjqueryを使っても上手くいかない！

テキストボックスのタイプがtextなせいでパスワード入力しても伏字にならなかったり、

タイプをpasswordに変更したところで薄い「パスワード」が伏字になる始末・・・。

そこでどうするかというとcssのdisplay:noneの登場です。

予め「パスワード」表示用のボックスと入力用のボックスを用意し、入力用のボックスをdisplay:noneしておきます。

     <input type=”text” id=”pass” size=”10″ value=”パスワード” />
     <input style=”display:none;” type=”password” id=”password” size=”10″/>

んで以下のスクリプトを挿入。 

  $(‘#pass’).css(‘color’,d_color).focus(function(){
   $(‘#pass’).css(“display”,”none”);
   $(“#password”).attr(“style”,”display:show”);
   $(‘#password’).focus();

  });
  //選択が外れたときの処理
  $(‘#password’).blur(function(){
   if($(this).val() == this.defaultValue | $(this).val() == ”){
    this.value = ”;
    $(‘#password’).css(“display”,”none”);
    $(“#pass”).attr(“style”,”display:show”);
    $(‘#pass’).css(‘color’,d_color)
   };
  });

するとあら不思議、伏字入力らへんがばっちりできちゃいました。

た　だ　し、まだ入力内容を取得できるかどうかのテストはしてましぇーん（笑）

悪しからず。

追記：バッチリ情報取得できました。