文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 入力部品のデザイン > パスワードの最後の1文字表示

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

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

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

パスワード入力してみよう!

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

最後の文字を表示する時間
使用したhtml
<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>
使用したJavaScript
<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>
使用したCSS
#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;
}
ページTOP
広告
広告

注意事項

日本語(全角)入力の判定方法はブラウザにより異なるためご注意ください。IE、FireFoxではIMEモードをOFFとして日本語(全角)入力が出来ないようにしています。Chromeなどは日本語(全角)が入力されたときに入力を無効としてエラーを表示しています。

サンプルのJavaScriptは、表示可能なアスキー文字(半角文字)をすべて入力可能としています。パスワードに文字制約がある場合は変更してください。
アスキー文字の並びで「!」~「˜」の範囲を入力可能としています。

入力確認用の「表示ボタン」を付けています。表示ボタン押下時は3秒間パスワードが表示されます。

パスワード入力サンプルのため、不要なロジックも含まれていますので、改造してご利用ください。

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン