［ASP.NET AJAX］MaskedEditコントロールでテキストボックスに入力可能な値を制限するには？［2.0、3.0、3.5、C#、VB］ - ＠IT

.NET TIPS ［ASP.NET AJAX］MaskedEditコントロールでテキストボックスに入力可能な値を制限するには？［2.0、3.0、3.5、C#、VB］ 山田 祥寛 2008/08/14

　MaskedEditコントロールは、ASP.NET AJAX Control Toolkit（以降、Control Toolkit）で提供されるコントロールの1つで、テキストボックスに入力可能な値を制限するためのコントロールだ。

　「TIPS：［ASP.NET AJAX］FilteredTextBoxコントロールでテキストボックスに入力可能な文字種を制限するには？」でも紹介したFilteredTextBoxコントロールにも似ていると思われるかもしれないが、FilteredTextBoxコントロールがテキストボックスに入力可能な文字の「種類」だけを規定するのに対して、MaskedTextBoxコントロールでは文字列の「形式」「入力規則（マスク）」を規定できるのが特徴だ。WindowsフォームにおけるMaskedTextBoxコントロールのようなものだと思っていただいてもよいかもしれない。

　日付や時刻、金額をはじめ、郵便番号やクレジットカードのように（使える文字種類だけでなく）あらかじめフォーマットの決まっている文字列を入力させる場合には、MaskedEditコントロールを利用することで、より厳密に入力可能な文字列を制限することが可能になる。

　なお、MaskedEditコントロールは、厳密にはテキストボックスへの入力を制限する機能を持つMaskedEditExtenderコントロールと、マスクにより入力制限されたテキストボックスの妥当性を検証するMaskedEditValidatorコントロールとで構成される。

　本稿では、まずMaskedEditExtenderコントロールを利用するので、単にMaskedEditコントロールと表記した場合には、MaskedEditExtenderの方を表すものとする。ご了承いただきたい（MaskedEditValidatorコントロールについては、後日別稿「TIPS：［ASP.NET AJAX］MaskedEditValidatorコントロールでマスク機能付きテキストボックスへの入力値を検証するには？」で解説する予定だ）。

　それではさっそく、MaskedEditコントロールを利用して、上の画面のような日付／時刻、金額、RGB形式のカラー・コードを入力するためのテキストボックスを作成してみよう。

　なお、本サンプル・プログラムを動作させるに当たっては、「TIPS：［ASP.NET AJAX］ASP.NET AJAX Control Toolkitを利用するには？」で紹介した手順に従って、Control Toolkitを利用可能な状態にしておく必要がある。

1. 新規のWebフォームを作成する

　新規のWebフォーム（MaskedEdit.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でサーバ・コントロールを配置する。

　それぞれマスク機能を適用したいテキストボックスの数だけMaskedEditコントロールも配置する必要がある。ちなみに、Visual Studio 2008ではExtenderコントロールの適用方法が変更になっているので、要注意。Visual Studio 2008におけるExtenderコントロールの適用方法については、「ASP.NETアプリ開発者のためのVisual Studio 2008新機能 Part II」で紹介している。

　また、ToolkitScriptManagerコントロールは、Control Toolkitを利用する場合に必ず必要となるコントロールだ。詳細については、「TIPS：［ASP.NET AJAX］AlwaysVisibleControlコントロールで常時表示されるパネルを定義するには？」を参照してほしい。

2. コントロールのプロパティ情報を設定する

　次に、ページに配置したサーバ・コントロールのプロパティを以下の表の要領で設定する。

　MaskedEditコントロールのTargetControlIDプロパティには、マスク機能を関連付けるテキストボックスを指定する。ここではそれぞれ「txtTime」「txtMoney」を指定しているので、これによって、TextBoxコントロールtxtTime、txtMoneyにMaskedEditコントロールの機能が付与されたことになるわけだ。

　なお、MaskedEditコントロールのそのほかのプロパティを設定する場合、（MaskedEditコントロールそのものではなく）関連付けたコントロールのプロパティとして設定する必要がある点に注意してほしい。この場合であれば、TextBoxコントロールのプロパティ・ウィンドウに「meeDateTime（MaskedEditExtender）」のような項目が追加されているので、この項目の配下から個々の値を設定することができる。

　MaskedEditコントロールで利用可能な主なプロパティは、以下のとおりだ。

　実に多くのプロパティが公開されているが、マスクの基本的な挙動を定義するには、最低限、MaskType／Maskプロパティを設定すればよい。

　最初の2つのMaskedEditコントロールmeeDateTime、meeMoneyでは、MaskType／Maskプロパティとして「DateTime」／「9999/99/99 99:99」、「Number」／「9,999」と設定しているので、それぞれ年月日時分、4けたの数値の入力を許可することになる。

　もう1つのMaskedEditコントロールmeeRgbはやや複雑だ。MaskプロパティにC、A、Nを指定している場合には、Filteredプロパティで利用可能なカスタム文字を指定する必要がある。ここではFilteredプロパティに「ABCDEF」が指定されており（大文字小文字は区別される）、Maskプロパティは「#N{6}」としているので、「#」＋「数値またはA〜Fの6けた」のような文字列を意味する。「{6}」は直前の文字を6けた分繰り返せることを示すものだ。従って、今回のケースでは「#NNNNNN」と記述しても同意である。

　これだけでもマスクの挙動は可能であるが、適宜［オプション］カテゴリに分類されるようなプロパティを設定することで、午前／午後や通貨記号の表示、入力方向などの挙動を細かく設定することもできる。

　いずれも直感的に分かりやすいプロパティばかりであるが、一点のみCultureNameプロパティが「ja-JP」（日本）で、AcceptAMPMプロパティをTrueに設定した場合の挙動に要注意だ。というのも、午前／午後の表示を有効にした場合、MaskedEditコントロールではテキストボックスにフォーカスした状態で「A」「P」キーを押下することで午前／午後の表示を切り替えられる。しかし、日本語表示の場合、この切り替えがうまく動作しないのである（執筆時点）。AcceptAMPMプロパティを有効にする場合には、CultureNameプロパティを「en-US」などの値に設定することをお勧めする。

　以上、フォーム・レイアウトが定義できたところで、ここまでにVisual Studioで自動生成されたコードを引用しておく。プロパティ・ウィンドウ上ではTextBoxコントロール配下のプロパティとして設定した各プロパティも、コード上はMaskedEditコントロールの属性として記述されていることが確認できるはずだ。

<%--Control Toolkitを使用する場合には先頭にScriptManagerの配置は必須--%> <ajaxToolkit:ToolkitScriptManager ID="manager" runat="server">   </ajaxToolkit:ToolkitScriptManager> <%--日時を入力するためのマスク付きテキストボックスの設定--%> 日時：&nbsp; <asp:TextBox ID="txtTime" runat="server"></asp:TextBox> <ajaxToolkit:MaskedEditExtender ID="meeDateTime" runat="server"   AcceptAMPM="True" CultureName="en-US" Mask="9999/99/99 99:99"   MaskType="DateTime" TargetControlID="txtTime" UserDateFormat="YearMonthDay">   </ajaxToolkit:MaskedEditExtender> <br /> <%--金額を入力するためのマスク付きテキストボックスの設定--%> 金額：&nbsp; <asp:TextBox ID="txtMoney" runat="server"></asp:TextBox> <ajaxToolkit:MaskedEditExtender ID="meeMoney" runat="server"   AcceptNegative="Left" CultureName="ja-JP" DisplayMoney="Left"   InputDirection="RightToLeft" Mask="9,999"   MaskType="Number" TargetControlID="txtMoney">   </ajaxToolkit:MaskedEditExtender> <br /> <%--RGB形式のカラーコードを入力するためのマスク付きテキストボックスの設定--%> RGB色： <asp:TextBox ID="txtRgb" runat="server"></asp:TextBox><br /> <ajaxToolkit:MaskedEditExtender ID="meeRgb" runat="server"   ClearMaskOnLostFocus="False" Filtered="ABCDEF" Mask="#N{6}"   TargetControlID="txtRgb">   </ajaxToolkit:MaskedEditExtender>

MaskedEdit.aspxのソース・コード（抜粋）

一連のレイアウト編集を行った後、Visual Studioによって自動生成されたコードを引用したもの。なお、<%--〜--%>は筆者によるコメント。

　以上で、MaskedEditコントロールを利用するための手続きは完了だ。作成したサンプル・プログラムを実行し、冒頭の画面のような動作を確認できれば成功である。

TechTargetジャパン