書式による入力制限 - マスクコントロール -

マスクとコンボコントロールの両方に、正規表現を使用して定型書式を設定できます。また、入力された文字が指定の文字種へ自動的に変換できるかどうかや、未入力時のプロンプト文字を設定することも可能です。
※Chrome、SafariではIMEモードの設定は無効となります。

入力確認
書式の設定
自動変換
IMEモード
改行コードの扱い
プロンプト文字

ソースコード

別ウィンドウで表示
using GrapeCity.Web.Input.Core;
using System;

public partial class Format_GcMask : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            // 初期値を設定します。
            GcComboBox2.SelectedIndex = 0;
            GcComboBox3.SelectedIndex = 0;
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        // 各コントロールの書式を設定します。
        // マスクコントロールを設定します。
        GcMask1.ImeMode = (ImeMode)GcComboBox2.SelectedIndex;
        if (GcListBox1.SelectedIndex > -1)
        {
            GcMask1.Format.Pattern = GcListBox1.SelectedItem.Text;
        }
        GcMask1.AcceptsCrLf = (CrLfMode)GcComboBox3.SelectedIndex;
        GcMask1.AutoConvert = CheckBox1.Checked;
        GcMask1.PromptChar = Convert.ToChar(GcTextBox1.Text);

        // コンボコントロールを設定します。
        GcComboBox1.ImeMode = (ImeMode)GcComboBox2.SelectedIndex;
        if (GcListBox1.SelectedIndex > -1)
        {
            GcComboBox1.Format.Pattern = GcListBox1.SelectedItem.Text;
        }

        GcComboBox1.AcceptsCrLf = (CrLfMode)GcComboBox3.SelectedIndex;
        GcComboBox1.AutoConvert = CheckBox1.Checked;
        GcComboBox1.PromptChar = Convert.ToChar(GcTextBox1.Text);
    }
}

Partial Class Format_GcMask
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            ' 初期値を設定します。
            GcComboBox2.SelectedIndex = 0
            GcComboBox3.SelectedIndex = 0
        End If
    End Sub

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ' 各コントロールの書式を設定します。
        ' マスクコントロールを設定します。
        GcMask1.ImeMode = GcComboBox2.SelectedIndex
        If GcListBox1.SelectedIndex > -1 Then
            GcMask1.Format.Pattern = GcListBox1.SelectedItem.Text
        End If
        GcMask1.AcceptsCrLf = GcComboBox3.SelectedIndex
        GcMask1.AutoConvert = CheckBox1.Checked
        GcMask1.PromptChar = GcTextBox1.Text

        ' コンボコントロールを設定します。
        GcComboBox1.ImeMode = GcComboBox2.SelectedIndex
        If GcListBox1.SelectedIndex > -1 Then
            GcComboBox1.Format.Pattern = GcListBox1.SelectedItem.Text
        End If
        GcComboBox1.AcceptsCrLf = GcComboBox3.SelectedIndex
        GcComboBox1.AutoConvert = CheckBox1.Checked
        GcComboBox1.PromptChar = GcTextBox1.Text
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Format_GcMask, App_Web_er03pujf" stylesheettheme="SkinFile" %>

<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMMask" tagprefix="im_mask" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMList" tagprefix="im_list" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMCombo" tagprefix="im_combo" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // 書式を設定します。
        function GcListBox1_SelectedIndexChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;
            FindIMControl("<% =GcMask1.ClientID %>").SetFormatPattern(sender.GetText());
            FindIMControl("<% =GcComboBox1.ClientID %>").SetFormatPattern(sender.GetText());
        }
        // IMEモードを設定します。
        function GcComboBox2_SelectedIndexChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;
            FindIMControl("<% =GcMask1.ClientID %>").SetImeMode(sender.GetSelectedItem().SubItems[1].GetValue());
            FindIMControl("<% =GcComboBox1.ClientID %>").SetImeMode(sender.GetSelectedItem().SubItems[1].GetValue());
        }
        // 改行コードの扱いを設定します。
        function GcComboBox3_SelectedIndexChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;
            FindIMControl("<% =GcMask1.ClientID %>").SetAcceptsCrLf(sender.GetSelectedItem().SubItems[1].GetValue());
            FindIMControl("<% =GcComboBox1.ClientID %>").SetAcceptsCrLf(sender.GetSelectedItem().SubItems[1].GetValue());
        }
        // プロンプト文字を設定します。
        function GcTextBox1_TextChanged(sender, eArgs) {
            if (!document.getElementById("isClient").checked) return;
            FindIMControl("<% =GcMask1.ClientID %>").SetPromptChar(sender.GetText());
            FindIMControl("<% =GcComboBox1.ClientID %>").SetPromptChar(sender.GetText());
        }
        // 指定した文字に自動変換するかどうかを設定します。
        function AutoConvert(obj) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcMask1.ClientID %>").SetAutoConvert(obj.checked);
            FindIMControl("<% =GcComboBox1.ClientID %>").SetAutoConvert(obj.checked);
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
        <table>
            <tr>
                <th>入力確認</th>
            </tr>
            <tr>
                <td><im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" 
                        Width="300px"></im_mask:GcMask>
                </td>
            </tr>
            <tr>
                <td><im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" 
                        Width="300px"></im_combo:GcComboBox>
                </td>
            </tr>
        </table>
    </div>
    <label style="font-size:80%;"><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label>
    <table class="inputTable">
        <tr>
            <th class="inputTh">書式の設定</th>
            <td class="inputTd">
                <im_list:GcListBox ID="GcListBox1" runat="server" HasLoadFromXml="True" Width="500px" Height="155px">
                    <ClientEvents SelectedIndexChanged="GcListBox1_SelectedIndexChanged" />
                    <ListHeaderPane Visible="True" />
                    <DefaultColumn AutoWidth="True" />
                    <listcolumn header-text="書式"></listcolumn>
                    <listcolumn header-text="説明"></listcolumn>
                    <listitem></listitem>
                    <subitem index="0" value="TEL:\D{2,4}\(\D{2,4}\)\D{4}"></subitem>
                    <subitem index="0" value="電話番号の定型書式"></subitem>
                    <listitem></listitem>
                    <subitem index="1" value="〒\D{3}-\D{4}"></subitem>
                    <subitem index="1" value="郵便番号の定型書式"></subitem>
                    <listitem></listitem>
                    <subitem index="2" value="製造番号:\A{3}\D{8}"></subitem>
                    <subitem index="2" value="異なる文字種の組み合わせ"></subitem>
                    <listitem></listitem>
                    <subitem index="3" value="[\D^123]{3,10}"></subitem>
                    <subitem index="3" value="「1,2,3」以外で3~10文字の半角数字の入力を許可"></subitem>
                    <listitem></listitem>
                    <subitem index="4" value="[^\J]{0,5}"></subitem>
                    <subitem index="4" value="ひらがな以外の入力を5文字まで許可"></subitem>
                    <listitem></listitem>
                    <subitem index="5" value="[\Z^\T]{0,}"></subitem>
                    <subitem index="5" value="サロゲートペア文字以外の全角文字の入力を許可"></subitem>
                    <helpvalue ></helpvalue>
                </im_list:GcListBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">自動変換</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" Text="指定した文字種にあわせて自動的に変換する" onclick="AutoConvert(this);" />
            </td>
        </tr>
        <tr>
            <th class="inputTh">IMEモード</th>
            <td class="inputTd">
                <im_combo:GcComboBox ID="GcComboBox2" runat="server" HasLoadFromXml="True" 
                    Width="200px" DropDownStyle="DropDownList">
                    <clientevents selectedindexchanged="GcComboBox2_SelectedIndexChanged"></clientevents>
                    <comboitem></comboitem>
                    <subitem index="0" value="設定なし"></subitem>
                    <subitem index="0" value="auto"></subitem>
                    <comboitem></comboitem>
                    <subitem index="1" value="日本語入力"></subitem>
                    <subitem index="1" value="active"></subitem>
                    <comboitem></comboitem>
                    <subitem index="2" value="半角英数入力"></subitem>
                    <subitem index="2" value="inactive"></subitem>
                    <comboitem></comboitem>
                    <subitem index="3" value="使用不可"></subitem>
                    <subitem index="3" value="disabled"></subitem>
                    <helpvalue ></helpvalue>
                </im_combo:GcComboBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">改行コードの扱い</th>
            <td class="inputTd">
                <im_combo:GcComboBox ID="GcComboBox3" runat="server" HasLoadFromXml="True" 
                    Width="200px" DropDownStyle="DropDownList">
                    <clientevents selectedindexchanged="GcComboBox3_SelectedIndexChanged"></clientevents>
                    <ListBox width="220" />
                    <comboitem></comboitem>
                    <subitem index="0" value="そのまま使用"></subitem>
                    <subitem index="0" value="nocontrol"></subitem>
                    <comboitem></comboitem>
                    <subitem index="1" value="すべての改行コードを削除"></subitem>
                    <subitem index="1" value="filter"></subitem>
                    <comboitem></comboitem>
                    <subitem index="2" value="改行コード以降の文字列を切り取り"></subitem>
                    <subitem index="2" value="cut"></subitem>
                    <helpvalue ></helpvalue>
                </im_combo:GcComboBox>
            </td>
        </tr>
        <tr>
            <th class="inputTh">プロンプト文字</th>
            <td class="inputTd">
                <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                    Text="_" Width="80px" MaxLength="1"><clientevents textchanged="GcTextBox1_TextChanged"></clientevents></im_edit:GcTextBox>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" 
            onclick="Button1_Click" />
    </center>
</asp:Content>


このページの先頭へ戻る