フォーカス移動 - Tabキーの動作 -

Tabキーの押下時、テキストコントロールではフォーカス移動かタブ文字の入力を設定でき、書式設定が可能なコントロールでは、コントロールかフィールドの移動かを設定できます。

テキスト: 日付時刻:
マスク: 日付:
コンボ: 時刻:
Tabキーの動作
(テキスト)
Tabキーの動作
(マスク、コンボ、日付時刻、日付、時刻)

ソースコード

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

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

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        // テキストコントロールのTabキー動作を設定します。
        GcTextBox1.AcceptsTab = bool.Parse(RadioButtonList1.SelectedValue);

        // マスク、コンボ、日付時刻、日付、時刻コントロールのTabキー動作を設定します。
        GcMask1.TabAction = (TabAction)RadioButtonList2.SelectedIndex;
        GcComboBox1.TabAction = (TabAction)RadioButtonList2.SelectedIndex;
        GcDateTime1.TabAction = (TabAction)RadioButtonList2.SelectedIndex;
        GcDate1.TabAction = (TabAction)RadioButtonList2.SelectedIndex;
        GcTime1.TabAction = (TabAction)RadioButtonList2.SelectedIndex;
    }
}

Partial Class Focus_TabKey
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ' テキストコントロールのTabキー動作を設定します。
        GcTextBox1.AcceptsTab = RadioButtonList1.SelectedValue

        ' マスク、コンボ、日付時刻、日付、時刻コントロールのTabキー動作を設定します。
        GcMask1.TabAction = RadioButtonList2.SelectedIndex
        GcComboBox1.TabAction = RadioButtonList2.SelectedIndex
        GcDateTime1.TabAction = RadioButtonList2.SelectedIndex
        GcDate1.TabAction = RadioButtonList2.SelectedIndex
        GcTime1.TabAction = RadioButtonList2.SelectedIndex
    End Sub

End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Focus_TabKey, App_Web_5wa5zksc" theme="SkinFile" %>

<%@ 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.IMEdit" tagprefix="im_edit" %>
<%@ 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" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // テキストコントロールのTabキー動作を設定します。
        function AcceptsTab(obj) {
            if (!document.getElementById("isClient").checked) return;

            var acceptsTab;
            var radio = obj.getElementsByTagName("input");
            for (var i = 0; i < radio.length; ++i) {
                if (radio[i].checked) {
                    acceptsTab = radio[i].value;
                }
            }
            FindIMControl("<% =GcTextBox1.ClientID %>").SetAcceptsTab(acceptsTab);
        }
        // マスク、コンボ、日付時刻、日付、時刻コントロールのTabキー動作を設定します。
        function TabAction(obj) {
            if (!document.getElementById("isClient").checked) return;

            var tabAction;
            var radio = obj.getElementsByTagName("input");
            for (var i = 0; i < radio.length; ++i) {
                if (radio[i].checked) {
                    tabAction = radio[i].value;
                }
            }
            FindIMControl("<% =GcMask1.ClientID %>").SetTabAction(tabAction);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetTabAction(tabAction);
            FindIMControl("<% =GcDate1.ClientID %>").SetTabAction(tabAction);
            FindIMControl("<% =GcComboBox1.ClientID %>").SetTabAction(tabAction);
            FindIMControl("<% =GcTime1.ClientID %>").SetTabAction(tabAction);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
    <table>
        <tr>
            <td class="controlsTd">テキスト:</td>
            <td>
                <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" Height="50px" 
                    MultiLine="True" Width="200px"></im_edit:GcTextBox>
            </td>
            <td class="controlsTd">日付時刻:</td>
            <td>
                <im_date:GcDateTime ID="GcDateTime1" runat='server' HasLoadFromXml="True" Width="200px">
                </im_date:GcDateTime>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">マスク:</td>
            <td>
                <im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" Width="200px">
                    <Format Pattern="℡ \D{2,4}-\D{2,4}-\D{4}" />
                </im_mask:GcMask>
            </td>
            <td class="controlsTd">日付:</td>
            <td>
                <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="200px">
                </im_date:GcDate>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">コンボ:</td>
            <td>
                <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" Width="200px">
                    <Format Pattern="℡ \D{3}-\D{4}-\D{4}" />
                    <comboitem></comboitem>
                    <subitem index="0" value="℡ 090-0000-0000"></subitem>
                    <comboitem></comboitem>
                    <subitem index="1" value="℡ 090-1111-1111"></subitem>
                    <comboitem></comboitem>
                    <subitem index="2" value="℡ 090-2222-2222"></subitem>
                    <helpvalue ></helpvalue>
                </im_combo:GcComboBox>
            </td>
            <td class="controlsTd">時刻:</td>
            <td>
                <im_date:GcTime ID="GcTime1" runat="server" HasLoadFromXml="True" Width="200px">
                <DropDown Visible="False"/></im_date:GcTime>
            </td>
        </tr>
    </table>
    </div>
    <label style="font-size:80%;"><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label>
    <table class="inputTable">
        <tr>
            <th class="inputTh">Tabキーの動作<br />(テキスト)</th>
            <td class="inputTd">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" onchange="AcceptsTab(this)">
                    <asp:ListItem Value="true">タブ文字を入力</asp:ListItem>
                    <asp:ListItem Selected="True" Value="false">フォーカス移動</asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">Tabキーの動作<br />(マスク、コンボ、日付時刻、日付、時刻)</th>
            <td class="inputTd">
                <asp:RadioButtonList ID="RadioButtonList2" runat="server" onchange="TabAction(this)">
                    <asp:ListItem Value="control" Selected="True">コントロール間を移動</asp:ListItem>
                    <asp:ListItem Value="field">フィールド間を移動</asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" 
            onclick="Button1_Click" />
    </center>
</asp:Content>


このページの先頭へ戻る