スマホ(iPhoneやAndroid)風にパスワードの最後1文字を表示

iPhoneやAndroidなどのスマートフォンでパスワード入力するときには、入力直後に最後の1文字が一定時間表示されますが、パソコンのパスワード入力「input type="password"」では表示されません。
パソコンのブラウザでもパスワードの最後の1文字を表示するためには、JavaScriptを使用する必要がありますので、当ページを参考にご確認ください。

当ページのJavaScriptは、jQueryを使用しないサンプルとなっています。生成されたJavaScriptはそのままコピーしてご利用いただけます。

以下は2つの入力域を利用して実現しています。実際にパスワードが格納されるのは「input type="password" (id=inPass)」のタグになりますのでご注意ください。
最後の1文字を表示する時間は指定できます。また、全角（日本語）の入力は禁止し、半角のみ入力可能としています。

<input type="text" placeholder="password入力" autocomplete="off"
       id="inDummy"
       oninput="changePass()"
       onkeydown="inKey(event)">
<input type="text" id="inPass"> <!-- ←ここにパスワードが入る -->
<input type="button" value="表示" onclick="dispPass()">
<div id="errMsg" style="display:none">全角モードをOFFで入力ください</div>

<style type="text/css">
var dispTimer;
function inKey(event){
 // =========================================================
 //   方向キーが押された場合、パスワードをマスク化
 // =========================================================
    if((event.keyCode >= 33)&&(event.keyCode <= 40)){dispEnd();}
}
function changePass(){
 // =========================================================
 //   パスワード入力の度に実行される
 // =========================================================
    if(dispTimer){clearTimeout(dispTimer);}
 
    var inD  = document.getElementById("inDummy");
    var inP  = document.getElementById("inPass");
    var wErr = 0;
 
    // --- 半角文字以外は無視する(Chromeなど用) -------------
    var str = inD.value;
    while(str.match(/[^!-~●]/)){
        str=str.replace(/[^!-~●]/,"");
        wErr = 1;
    }
    if(wErr == 1){
        inD.value = str;
    }
 
    // --- 入力位置を取得し最後でなければ以降は消す ---------
    var wInCus      = inD.selectionStart;
    if(wInCus < inD.value.length){
        inD.value = inD.value.substr(0, wInCus);
    }
 
    // --- 入力文字とパスワードエリアの同期合わせ -----------
    var wLastStr = inD.value.slice(-1);
 
    if(wLastStr == "●"){
        inP.value = inP.value.substr(0, inD.value.length);
    }
    else{
        inP.value = inP.value.substr(0, inD.value.length - 1) + ''
                  + wLastStr;
        if(wInCus != 0){
            inD.value = Array(inP.value.length).join('●')
                      + wLastStr;
        }
 
        // 一定時間でパスワードのマスク化を実行
        dispTimer = setTimeout(dispEnd, 1200);
    }
 
    // --- 半角文字以外の入力メッセージを表示 ---------------
    document.getElementById("errMsg").style.display=(wErr==1 ? "" : "none");
}
function dispEnd(){
 // =========================================================
 //   タイマー時間経過でパスワードをマスク化
 // =========================================================
    var inD     = document.getElementById("inDummy");
 
    if(inD.value.match(/[^●]$/)){
        inD.value = Array(inD.value.length + 1).join('●');
    }
}
function dispPass(){
 // =========================================================
 //   表示ボタンが押された場合、パスワードを一定時間表示
 // =========================================================
    if(dispTimer){clearTimeout(dispTimer);}
 
    document.getElementById("inDummy").value 
        = document.getElementById("inPass").value;
 
    dispTimer = setTimeout(dispEnd, 3000);
}
</style>

#inDummy {
  width      : 200px;
  font-size  : 12pt;
  padding    : 3px 5px;
  ime-mode   : disabled;
}
#inPass{
  display    : none;
}
#errMsg {
  width      : 250px;
  margin     : 5px auto;
  background : #fff;
  border     : 2px solid red;
  color      : red;
  font-size  : 10pt;
}