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

キー操作 - ショートカットキー -

InputManのショートカットエクステンダはページ上のコントロールの動作を任意のキーに割り当て、ショートカット機能を付与します。InputManコントロールだけでなく、標準コントロールにも適用することができ、コントロール固有の動作や独自のクライアントスクリプトによる動作の割り当てが可能です。また、コントロールだけではなくページ全体に設定されたショートカットキーは、フォーカス位置に依存せず、割り当てられた動作を実行します。
ここでは、設定済みのショートカットキーの動作を確認できます。

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

キー	動作	設定されたコントロール
■設定済みのショートカットキー一覧
［Alt］+［K］	文字色と背景色を切り替える	全コントロール
［Shift］+［N］	次のコントロールまたはフィールドに移動	全コントロール
［Shift］+［P］	前のコントロールまたはフィールドに移動	全コントロール
［F2］	入力値のクリア	InputManコントロール
［F7］	ドロップダウン	テキスト、コンボ、日付時刻、日付、時刻、数値
［U］	スピンアップ	マスク、コンボ、日付時刻、日付、時刻、数値
［D］	スピンダウン	マスク、コンボ、日付時刻、日付、時刻、数値
［F8］	現在の日時の表示	日付時刻、日付、時刻
［Shift］+［F2］	すべてのコントロールの入力値をクリア	ページ全体
［Shift］+［D］	すべてのコントロールに初期値を設定	ページ全体

ソースコード

C#
VB
ASPX

別ウィンドウで表示

using System;

public partial class KeyOperation_GcShortcut : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}


Partial Class KeyOperation_GcShortcut
    Inherits System.Web.UI.Page

End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="KeyOperation_GcShortcut, App_Web_fxhfs2zs" stylesheettheme="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.IMExtenders" tagprefix="im_extenders" %>
<%@ 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.IMDate" tagprefix="im_date" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMCombo" tagprefix="im_combo" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // TextBoxコントロールの色を設定します。
        function SetTextBoxColor() {
            var txt = document.getElementById("<% =TextBox1.ClientID %>");

            txt.style.backgroundColor = txt.style.backgroundColor == "blue" ? "Window" : "blue";
            txt.style.color = txt.style.color == "white" ? "WindowText" : "white";
        }

        // テキストコントロールの色を設定します。
        function SetGcTextBoxColor() {
            var edt = FindIMControl("<% =GcTextBox1.ClientID %>");

            edt.SetBackColor(edt.GetBackColor() == "blue" ? "Window" : "blue");
            edt.SetForeColor(edt.GetForeColor() == "white" ? "WindowText" : "white");
        }

        // マスクコントロールの色を設定します。
        function SetGcMaskColor() {
            var msk = FindIMControl("<% =GcMask1.ClientID %>");

            msk.SetBackColor(msk.GetBackColor() == "blue" ? "Window" : "blue");
            msk.SetForeColor(msk.GetForeColor() == "white" ? "WindowText" : "white");

        }

        // コンボコントロールの色を設定します。
        function SetGcComboBoxColor() {
            var cmb = FindIMControl("<% =GcComboBox1.ClientID %>");

            cmb.SetBackColor(cmb.GetBackColor() == "blue" ? "Window" : "blue");
            cmb.SetForeColor(cmb.GetForeColor() == "white" ? "WindowText" : "white");
        }

        // 日付時刻コントロールの色を設定します。
        function SetGcDateTimeColor() {
            var dt = FindIMControl("<% =GcDateTime1.ClientID %>");

            dt.SetBackColor(dt.GetBackColor() == "blue" ? "Window" : "blue");
            dt.SetForeColor(dt.GetForeColor() == "white" ? "WindowText" : "white");
        }

        // 日付コントロールの色を設定します。
        function SetGcDateColor() {
            var dt = FindIMControl("<% =GcDate1.ClientID %>");

            dt.SetBackColor(dt.GetBackColor() == "blue" ? "Window" : "blue");
            dt.SetForeColor(dt.GetForeColor() == "white" ? "WindowText" : "white");
        }

        // 時刻コントロールの色を設定します。
        function SetGcTimeColor() {
            var tm = FindIMControl("<% =GcTime1.ClientID %>");

            tm.SetBackColor(tm.GetBackColor() == "blue" ? "Window" : "blue");
            tm.SetForeColor(tm.GetForeColor() == "white" ? "WindowText" : "white");
        }

        // 数値コントロールの色を設定します。
        function SetGcNumberColor() {
            var num = FindIMControl("<% =GcNumber1.ClientID %>");

            num.SetBackColor(num.GetBackColor() == "blue" ? "Window" : "blue");
            num.SetForeColor(num.GetForeColor() == "white" ? "WindowText" : "white");
        }

        function GcShortcut1_ShortcutKeyDown(sender, eArgs) {
            // [Shift] + [F2]キーが押されたときの処理です。
            if (eArgs.keyCode == 113 && eArgs.shiftKey == true) {

                document.getElementById("<% =TextBox1.ClientID %>").value = "";
                FindIMControl("<% =GcTextBox1.ClientID %>").Clear();
                FindIMControl("<% =GcMask1.ClientID %>").Clear();
                FindIMControl("<% =GcComboBox1.ClientID %>").Clear();
                FindIMControl("<% =GcDateTime1.ClientID %>").Clear();
                FindIMControl("<% =GcDate1.ClientID %>").Clear();
                FindIMControl("<% =GcTime1.ClientID %>").Clear();
                FindIMControl("<% =GcNumber1.ClientID %>").Clear();
            }
            // [Shift] + [D]キーが押された時の処理です。
            else if (eArgs.keyCode == 68 && eArgs.shiftKey == true) {
                document.getElementById("<% =TextBox1.ClientID %>").value = "TextBoxコントロール";
                FindIMControl("<% =GcTextBox1.ClientID %>").SetText("テキストコントロール");
                FindIMControl("<% =GcMask1.ClientID %>").SetText("マスクコントロール");
                FindIMControl("<% =GcComboBox1.ClientID %>").SetText("コンボコントロール");

                var dt = new Date();
                FindIMControl("<% =GcDateTime1.ClientID %>").SetValue(dt);
                dt.setHours(0, 0, 0, 0);
                FindIMControl("<% =GcDate1.ClientID %>").SetValue(dt);
                dt = new Date(1900, 0, 1, 12, 0, 0);
                FindIMControl("<% =GcTime1.ClientID %>").SetValue(dt);
                FindIMControl("<% =GcNumber1.ClientID %>").SetValue("99999");
            }
        }

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <im_extenders:GcShortcut ID="GcShortcut1" runat="server" 
        ClientEvents-ShortcutKeyDown="GcShortcut1_ShortcutKeyDown">
        <shortcutitem controlid = "GcTextBox1" value = "Clear,113,DropDown,118,NextControl,65614,PreviousControl,65616,None|SetGcTextBoxColor,262219"/>
        <shortcutitem controlid = "GcMask1" value = "Clear,113,NextControl,65614,PreviousControl,65616,None|SetGcMaskColor,262219,SpinUp,85,SpinDown,68"/>
        <shortcutitem controlid = "GcDateTime1" value = "Clear,113,DropDown,118,Now,119,SpinUp,85,SpinDown,68,NextControl,65614,PreviousControl,65616,None|SetGcDateTimeColor,262219"/>
        <shortcutitem controlid = "GcComboBox1" value = "Clear,113,DropDown,118,NextControl,65614,PreviousControl,65616,None|SetGcComboBoxColor,262219,SpinUp,85,SpinDown,68"/>
        <shortcutitem controlid = "GcDate1" value = "Clear,113,DropDown,118,Now,119,SpinUp,85,SpinDown,68,NextControl,65614,PreviousControl,65616,None|SetGcDateColor,262219"/>
        <shortcutitem controlid = "GcTime1" value = "Clear,113,DropDown,118,Now,119,SpinUp,85,SpinDown,68,NextControl,65614,PreviousControl,65616,None|SetGcTimeColor,262219"/>
        <shortcutitem controlid = "GcNumber1" value = "Clear,113,DropDown,118,SpinUp,85,SpinDown,68,NextControl,65614,PreviousControl,65616,None|SetGcNumberColor,262219"/>
        <shortcutitem controlid="TextBox1" value="NextControl,65614,PreviousControl,65616,None|SetTextBoxColor,262219" />
        <ShortcutKeys Keys="65649|65604" />
    </im_extenders:GcShortcut>

    <div class="sample">
        <table>
            <tr>
                <td class="controlsTd">標準TextBox:</td>
                <td class="controlsTd">
                    <asp:TextBox ID="TextBox1" runat="server" Width="200px">TextBoxコントロール</asp:TextBox>
                </td>
                <td class="controlsTd">日付時刻：</td>
                <td class="controlsTd">
                    <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" Width="200px">
                        <Spin Visible="True" />
                    </im_date:GcDateTime>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">テキスト：</td>
                <td class="controlsTd">
                    <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                        Text="テキストコントロール" Width="200px"><DropDown Visible="True" />
                    </im_edit:GcTextBox>
                </td>
                <td class="controlsTd">日付：</td>
                <td class="controlsTd">
                    <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="200px">
                        <Spin Visible="True" />
                    </im_date:GcDate>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">マスク：</td>
                <td class="controlsTd">
                    <im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" Width="200px">
                        <Format Pattern="(テキストコントロール|マスクコントロール|コンボコントロール|日付時刻コントロール|日付コントロール|時刻コントロール|数値コントロール)" />
                        <Spin Visible="True" /><helpvalue text="マスクコントロール"></helpvalue>
                    </im_mask:GcMask>
                </td>
                <td class="controlsTd">時刻：</td>
                <td class="controlsTd">
                    <im_date:GcTime ID="GcTime1" runat="server" HasLoadFromXml="True" Width="200px">
                        <helpvalue value = "1900/01/01 12:00:00" ></helpvalue><Spin Visible="True" />
                    </im_date:GcTime>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">コンボ：</td>
                <td class="controlsTd">
                    <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" 
                        Width="200px" ItemsChanged="True">
                        <Spin Visible="True" />
                        <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>
                        <comboitem></comboitem>
                        <subitem index="4" value="日付コントロール"></subitem>
                        <comboitem></comboitem>
                        <subitem index="5" value="時刻コントロール"></subitem>
                        <comboitem></comboitem>
                        <subitem index="6" value="数値コントロール"></subitem>
                        <helpvalue text="コンボコントロール" ></helpvalue>
                    </im_combo:GcComboBox>
                </td>
                <td class="controlsTd">数値：</td>
                <td class="controlsTd">
                    <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" Width="200px">
                        <Spin Visible="True" /><helpvalue value = "99999" ></helpvalue>
                    </im_number:GcNumber>
                </td>
            </tr>
        </table>
    </div>
    <table class="inputTable">
        <tr>
            <td colspan="3"><u>■設定済みのショートカットキー一覧</u><br /></td>
        </tr>
        <tr>
            <th class="inputTh">キー</th>
            <th class="inputTh">動作</th>
            <th class="inputTh">設定されたコントロール</th>
        </tr>
        <tr>
            <th class="inputTh">［Alt］+［K］</th>
            <td class="inputTd">文字色と背景色を切り替える</td>
            <td class="inputTd">全コントロール</td>
        </tr>
        <tr>
            <th class="inputTh">［Shift］+［N］</th>
            <td class="inputTd">次のコントロールまたはフィールドに移動</td>
            <td class="inputTd">全コントロール</td>
        </tr>
        <tr>
            <th class="inputTh">［Shift］+［P］</th>
            <td class="inputTd">前のコントロールまたはフィールドに移動</td>
            <td class="inputTd">全コントロール</td>
        </tr>
        <tr>
            <th class="inputTh">［F2］</th>
            <td class="inputTd">入力値のクリア</td>
            <td class="inputTd">InputManコントロール</td>
        </tr>
        <tr>
            <th class="inputTh">［F7］</th>
            <td class="inputTd">ドロップダウン</td>
            <td class="inputTd">テキスト、コンボ、日付時刻、日付、時刻、数値</td>
        </tr>
        <tr>
            <th class="inputTh">［U］</th>
            <td class="inputTd">スピンアップ</td>
            <td class="inputTd">マスク、コンボ、日付時刻、日付、時刻、数値</td>
        </tr>
        <tr>
            <th class="inputTh">［D］</th>
            <td class="inputTd">スピンダウン</td>
            <td class="inputTd">マスク、コンボ、日付時刻、日付、時刻、数値</td>
        </tr>
        <tr>
            <th class="inputTh">［F8］</th>
            <td class="inputTd">現在の日時の表示</td>
            <td class="inputTd">日付時刻、日付、時刻</td>
        </tr>
        <tr>
            <th class="inputTh">［Shift］+［F2］</th>
            <td class="inputTd">すべてのコントロールの入力値をクリア</td>
            <td class="inputTd">ページ全体</td>
        </tr>
        <tr>
            <th class="inputTh">［Shift］+［D］</th>
            <td class="inputTd">すべてのコントロールに初期値を設定</td>
            <td class="inputTd">ページ全体</td>
        </tr>
    </table>

</asp:Content>

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

キー操作 - ショートカットキー -

ソースコード