InputMan for ASP.NETデモアプリケーション

タッチ機能 - クライアント側イベント -

InputMan for ASP.NETの各コントロールでも、Internet Explorer 10以降で導入されたポインターイベントや、ジェスチャイベントといった、標準でサポートされているタッチに特化したクライアント側イベント使用できます。
ここでは、各コントロールで発生するイベントメッセージを確認できるほか、コントロールにポインターが置かれたとき、入力デバイスにより背景色を変更（マウス：水色、タッチ：黄色、ペン：緑）します。

※この機能はInternet Explorer 10以降で動作します。
※ここでは、タッチ関連イベント発生を有効にするため、既定のタッチ動作は無効に設定しています。

テキスト：
マスク：
日付時刻：
数値：
コンボ：

イベントメッセージ：

ソースコード

C#
VB
ASPX

別ウィンドウで表示

using System;

public partial class Touch_ClientEvent : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // コンボコントロールの初期値を設定します。
            GcComboBox1.SelectedIndex = 0;
        }
    }
}


Partial Class Touch_ClientEvent
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            ' コンボコントロールの初期値を設定します。
            GcComboBox1.SelectedIndex = 0
        End If
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Touch_ClientEvent, App_Web_tz1sshx0" theme="SkinFile" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMMask" tagprefix="im_mask" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMCombo" tagprefix="im_combo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        body {
            /* タッチの既定操作を無効にします */
            -ms-touch-action: none;
            touch-action : none;
        }
    </style>

    <script type="text/javascript">
        var gcGesture;
        function pageLoad() {
            try {
                // ジェスチャオブジェクトのインスタンスを生成します。
                gcGesture = new MSGesture();
            }
            catch (e) {
            }
        }
        function SetEventText(msg) {
            var txt = msg + "\r\n" + FindIMControl('<% =this.GcTextBox2.ClientID %>').GetText();
            FindIMControl('<% =this.GcTextBox2.ClientID %>').SetText(txt);
        }

        function IMControl_onmspointerdown(evt) {
            // IE11以降
            if(navigator.pointerEnabled)
            {
                switch (evt.pointerType) {
                    case "touch":
                        // 指が置かれたとき、背景色を黄色にします。 
                        FindIMControl(evt.currentTarget.id).SetBackColor("yellow");
                        break;
                    case "pen":
                        // ペンが置かれたとき、背景色を緑にします。 
                        FindIMControl(evt.currentTarget.id).SetBackColor("green");
                        break;
                    case "mouse":
                        // マウスが置かれたとき、背景色を水色にします。 
                        FindIMControl(evt.currentTarget.id).SetBackColor("aliceblue");
                        break;
                }
            }
                // IE10
            else if(navigator.msPointerEnabled)
            {
                switch (evt.pointerType) {
                    case evt.MSPOINTER_TYPE_TOUCH:
                        // 指が置かれたとき、背景色を黄色にします。 
                        FindIMControl(evt.currentTarget.id).SetBackColor("yellow");
                        break;
                    case evt.MSPOINTER_TYPE_PEN:
                        // ペンが置かれたとき、背景色を緑にします。 
                        FindIMControl(evt.currentTarget.id).SetBackColor("green");
                        break;
                    case evt.MSPOINTER_TYPE_MOUSE:
                        // マウスが置かれたとき、背景色を水色にします。 
                        FindIMControl(evt.currentTarget.id).SetBackColor("aliceblue");
                        break;
                }
            }

            // ジェスチャイベントをハンドル
            if (gcGesture) {
                // ジェスチャにターゲット要素を設定します。
                gcGesture.target = document.getElementById(evt.currentTarget.id);
                // ジェスチャ認識の際に処理するべきポインターを設定します。
                gcGesture.addPointer(evt.pointerId);
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table align="center">
        <tr>
            <td valign="top">
            <br />
            <table>
                <tr>
                    <td class="controlsTd">テキスト：</td>
                    <td>
                    <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                            Width="200px" Text="テキストコントロール">
                        <clientevents>
                            <StandardClientEvents 
                                onmspointerdown="IMControl_onmspointerdown" 
                                onmsgesturehold="SetEventText('GcTextBox : onmsgesturehold');"
                                onmspointerout="SetEventText('GcTextBox : onmspointerout');">
                            </StandardClientEvents>
                        </clientevents>
                    </im_edit:GcTextBox>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">マスク：</td>
                    <td>
                    <im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" Width="200px">
                        <Format Pattern="TEL \D{2,4}－\D{2,4}－\D{4}" />
                        <clientevents>
                            <StandardClientEvents 
                                onmspointerdown="IMControl_onmspointerdown"
                                onmsgesturetap="SetEventText('GcMask : onmsgesturetap');"
                                onmspointermove="SetEventText('GcMask : onmspointermove');">
                            </StandardClientEvents>
                        </clientevents>
                    </im_mask:GcMask>
                    </td>
                </tr>
                <tr>
                <td class="controlsTd">日付時刻：</td>
                    <td>
                    <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" Width="200px">
                        <clientevents>
                            <StandardClientEvents 
                                onmspointerdown="IMControl_onmspointerdown"
                                onmsgesturestart="SetEventText('GcDatetime : onmsgesturestart');"
                                onmspointerover="SetEventText('GcDateTime : onmspointerover');">
                            </StandardClientEvents>
                        </clientevents>
                    </im_date:GcDateTime>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">数値：</td>
                    <td>
                        <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" Width="200px">
                            <clientevents>
                                <StandardClientEvents 
                                    onmspointerdown="IMControl_onmspointerdown"
                                    onmsgestureend="SetEventText('GcNumber : onmsgestureend');"
                                    onmspointerup="SetEventText('GcNumber : onmspointerup');">
                                </StandardClientEvents>
                            </clientevents>
                        </im_number:GcNumber>
                    </td>
                </tr>
                <tr>
                    <td class="controlsTd">コンボ：</td>
                    <td>
                        <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" Width="200px">
                            <clientevents>
                                <StandardClientEvents 
                                    onmspointerdown="IMControl_onmspointerdown" 
                                    onmsgesturechange="SetEventText('GcComboBox : onmsgesturechange');"
                                    onmspointerhover="SetEventText('GcComboBox : onmspointerhover');">
                                </StandardClientEvents>
                            </clientevents>
                            <comboitem></comboitem>
                            <subitem index="0" value="項目１"></subitem>
                            <comboitem></comboitem>
                            <subitem index="1" value="項目２"></subitem>
                            <comboitem></comboitem>
                            <subitem index="2" value="項目３"></subitem>
                            <comboitem></comboitem>
                            <subitem index="3" value="項目４"></subitem>
                            <helpvalue ></helpvalue>
                        </im_combo:GcComboBox>
                    </td>
                </tr>
            </table>
            </td>
            <td class="controlsTd" valign="top" 
                style="text-align:center; padding-left:15px;">イベントメッセージ：<br />
                <im_edit:GcTextBox ID="GcTextBox2" runat="server" HasLoadFromXml="True" Height="280px" 
                    MultiLine="True" ScrollBarMode="Automatic" ScrollBars="Both" Width="270px">
                </im_edit:GcTextBox>
                <br />
                <input id="Button1" type="button" value="クリア" class="setButton"
                    onclick="FindIMControl('<% =this.GcTextBox2.ClientID %>').Clear();" />
            </td>
        </tr>
    </table>
</asp:Content>

InputMan for ASP.NET オンラインデモ

タッチ機能 - クライアント側イベント -

ソースコード