CodeZine(コードジン)

特集ページ一覧

ComponentOne Studio for ASP.NET Web Formsで使えるコンポーネント(入力補助/チャート編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/07/14 14:00
目次

入力コントロール

 Input for ASP.NET Web Formsは、テキストや数値、日付などの入力をサポートするためのコンポーネントで、クライアント側で動作するオブジェクトとしてさまざまなマスクや制約を提供しています。

Input関連コントロール
コントロール 概要
C1InputMask ユーザが入力した値が有効か無効かを識別するコントロール
C1InputDate C1InputMaskから派生した日付および時刻編集用コントロール
C1InputNumeric C1InputMaskから派生した数値編集用コントロール
C1InputCurrency C1InputNumericから派生した通貨編集用コントロール
C1InputPercent C1InputNumericから派生したパーセント値編集用コントロール
C1InputText 書式設定により入力可能文字を制限できるテキスト編集用コントロール

日本語固有の機能

 上記のコントロールでは、数値や日付、通貨、マスクテキストなどに入力される値に対して、和暦表示やバイト単位での文字数制御、そしてひらがな、カタカナ、全角、半角での入力操作を簡単に設定できます。

 ここでは、すべての全角文字とカタカナに制限した、氏名、フリガナを入力するフォームをC1InputTextを使って実装する例を紹介します。

 サンプルとしてInput.aspxという名前でWebフォームをプロジェクトに追加し、ツールボックスから「C1InputText」を2つデザイン画面にドロップしてください。

 入力できる文字種は、コントロールのタスクを表示させ、「書式」欄のボタンをクリックして開かれる「テキスト書式の設定」画面から必要な書式を選択するだけで指定できます。

テキスト書式の設定画面
テキスト書式の設定画面

 すべての全角文字に制限させたい場合の実装例は次のようになります。Format属性に先ほどの画面で指定した書式「Z」が入力されていることを確認してください。またIMEを強制的に有効するためにImeMode属性にActiveを指定しています。

リスト1 C1InputTextの設定(Input.aspx)
<%-- すべての全角文字 --%>
<wijmo:C1InputText runat=server Format="Z" ImeMode="Active">
</wijmo:C1InputText>

 同様に全角カタカナだけに制限するには、Format属性の値として「K」を設定します。 このプログラムを実行した例は以下のようになります。半角文字を入力しようとしても入力できなくなることを確認してください。

テキスト入力例
テキスト入力例

マスクコントロール

 C1InputMaskは、さまざまな種類のマスク文字を組み合わせて指定することで、いろいろなパターンに対応したマスクを定義できるようになっています。

 ここでは、日本の郵便番号として、半角「3桁数字-4桁数字」のみを受け付ける例を紹介します。

 定形のマスクを指定するにはコントロールのタスクを表示させ、「マスク」欄のボタンをクリックすると開かれる「定形入力」画面から適合するデータ書式を選択したり、選択した書式を必要に応じてカスタマイズしたりするだけで指定できます。

マスク定形入力画面
マスク定形入力画面

 マスクとして指定可能な文字などについては、C1InputMaskの定義を参照してください。

 郵便番号を入力できるようにしたC1InputMaskコントロールの実装例は、以下のとおりです。

リスト2 C1InputMaskの設定(Input.aspx)
<wijmo:C1InputMask ID="C1InputMask1" runat="server" MaskFormat="000-0000">

 このプログラムを実行すると、次のようなページが表示されます。半角数字以外入力受け付けできないことや、指定桁数以上の数字が入力できないことを確認してください。

郵便番号入力例
郵便番号入力例

日付コントロール

 C1InputDateは、直接数字を入力する以外に、カレンダーなどを使って日付や時刻を入力できます。このコントロールもC1InputMaskから派生しているため、コントロールのタスクから日時の書式を指定できるようになっています。

 ここでは、入力時には西暦で、表示時には和暦で表示させる例を紹介します。入力時の書式はDateFormat属性に、表示時の書式はDisplayFormat属性に指定します。

 和暦を定義するには、C1InputDateコントロール以外にJavaScriptの配列としてwindow.erasに年号の設定を配列で定義する必要があります。1つの年号については以下の値を定義します。

JavaScriptの配列で指定する和暦定義の値
定義名 意味
name 年号の正式名称 キーワード"ggg"で使用
abbreviation 年号の略称 キーワード"gg"で使用
symbol 年号のアルファベット略称 キーワード"g"で使用
startDate 年号の開始日。ハイフン(-)区切りで年月日を指定
shortcuts 和暦を入力する際のショートカットキー

 C1InputDateの日付書式として、例えば「ggg ee/MM/dd」を指定した場合には2015/06/01は「平成 27/06/01」と表示されます。これらの処理を実装した場合には、Input.aspxは以下のようになります。

リスト3 C1InputDateの設定(Input.aspx)
<%-- 和暦設定(一部) --%>
<script type="text/javascript">
  window.eras = [
    { name: "明治", abbreviation: "明", symbol: "Meiji",
      startDate: "1868-09-08", shortcuts: "1,M" },
    { name: "大正", abbreviation: "大", symbol: "Taisho",
      startDate: "1912-07-30", shortcuts: "2,T" },
    { name: "昭和", abbreviation: "昭", symbol: "Showa",
      startDate: "1926-12-25", shortcuts: "3,S" },
    { name: "平成", abbreviation: "平", symbol: "Heisei",
      startDate: "1989-01-08", shortcuts: "4,H" }
  ];
</script>

<%-- 日付(和暦)--%>
<wijmo:C1InputDate ID="C1InputDate1" runat="server"
  Date="1980-01-01" DisplayFormat="ggg ee/MM/dd" DateFormat="d"
</wijmo:C1InputDate>

 このプログラムを実行した例は以下のようになります。日付選択時には西暦で表示され、入力確定時には和暦で表示されていることがお分かりいただけるでしょうか。

日付選択中
日付選択中
日付確定後
日付確定後

  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 花田 善仁(ハナダ ヨシヒト)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5