パスワードと SSN の入力の非表示化

wijinputmask ウィジェットでは、パスワード文字を使用して、実際のパスワードや社会保障番号が画面に表示させないようにできます。この機能を活用するには、passwordChar オプションを使用します。MVC コントロールエクスプローラのライブデモで InputMask > Password サンプル（http://demo.componentone.com/ASPNET/MVCExplorer/inputmask/Password）と InputMask > SSN サンプル（http://demo.componentone.com/ASPNET/MVCExplorer/inputmask/SSN）を参照してください。

ASP.NET MVC 4 Wijmo アプリケーションを作成します。
ソリューションエクスプローラで、Views → Sharedフォルダを展開し、_Layout.cshtml をダブルクリックしてファイルを開きます。

次のマークアップをページの <body> タグ内に追加します。

ソースビュー	コードのコピー
<input type="text" id="textbox1" /> <h6>マスク</h6> <p>000-00-0000</p> <h6>Password Char</h6> <p>#</p> <input type="text" id="textbox2" /> <h6>マスク</h6> <p>CCCCCCC</p> <h6>Password Char:</h6> <p>*</p>

ソースビュー

コードのコピー

<input type="text" id="textbox1" />
<h6>マスク</h6>
<p>000-00-0000</p>
<h6>Password Char</h6>
<p>#</p>
<input type="text" id="textbox2" />
<h6>マスク</h6>
<p>CCCCCCC</p>
<h6>Password Char:</h6>
<p>*</p>

前の手順で追加した終了タグ </div> の後に、次の jQuery スクリプトを入力し、wijinputmask ウィジェットを初期化して、passwordChar オプションを設定します。

ソースビュー	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#textbox1").wijinputmask( { mask: '000-00-0000', passwordChar: '#', hidePromptOnLeave: true }); $("#textbox2").wijinputmask( { mask: 'CCCCCCC', passwordChar: '*', hidePromptOnLeave: true }); }); </script>

ソースビュー

コードのコピー

<script id="scriptInit" type="text/javascript">
       $(document).ready(function () {
                $("#textbox1").wijinputmask(
                {
               mask: '000-00-0000',
                passwordChar: '#',
                    hidePromptOnLeave: true
               });
                $("#textbox2").wijinputmask(
              {
               mask: 'CCCCCCC',
                passwordChar: '*',
                  hidePromptOnLeave: true
                });
     });
</script>

［F5］を押して、アプリケーションを実行し、最初のテキストボックスに数値を入力します。これらは # 文字によって非表示になります。２番目のテキストボックスに数字または文字を入力します。これらは * 文字によって非表示になります。