表示機能 - ウォーターマーク -

コントロールが未入力のときには、代替テキスト(ウォーターマーク)を表示できます。このウォーターマークはコントロールにフォーカスがある場合とない場合のそれぞれで、別の文字列と文字色を設定できます。また、日付時刻、日付コントロールでは和暦表示できない日付が入力されたとき、数値コントロールでは値がゼロのとき、Nullのときのそれぞれに対しても個別のウォーターマークが表示できます。
※和暦表示が可能な日付の範囲は、1868年9月8日~2087年12月31日です。

入力確認
テキスト: マスク:
日付時刻: 数値:
日付: コンボ:
時刻: 郵便番号:
フォーカスがあるときのウォーターマーク文字色
フォーカスがないときのウォーターマーク文字色

ソースコード

別ウィンドウで表示
using System;

public partial class Display_Watermark : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (GcColorPicker1.SelectedIndex > -1)
        {
            // コントロールにフォーカスがあるときのウォーターマーク文字列の色を設定します。
            var color = GcColorPicker1.SelectedColor;
            
            GcTextBox1.Watermark.Null.ForeColor = color;
            GcDateTime1.Watermark.Null.ForeColor = color;
            GcDate1.Watermark.Null.ForeColor = color;
            GcTime1.Watermark.Null.ForeColor = color;
            GcMask1.Watermark.Null.ForeColor = color;
            GcNumber1.Watermark.Null.ForeColor = color;
            GcComboBox1.Watermark.Null.ForeColor = color;
            GcPostal1.Watermark.Null.ForeColor = color;
        }

        if (GcColorPicker2.SelectedIndex > -1)
        {
            // コントロールにフォーカスがないときのウォーターマーク文字列の色を設定します。
            var displayColor = GcColorPicker2.SelectedColor;

            GcTextBox1.Watermark.DisplayNull.ForeColor = displayColor;
            GcDateTime1.Watermark.DisplayNull.ForeColor = displayColor;
            GcDate1.Watermark.DisplayNull.ForeColor = displayColor;
            GcTime1.Watermark.DisplayNull.ForeColor = displayColor;
            GcMask1.Watermark.DisplayNull.ForeColor = displayColor;
            GcNumber1.Watermark.DisplayNull.ForeColor = displayColor;
            GcComboBox1.Watermark.DisplayNull.ForeColor = displayColor;
            GcPostal1.Watermark.DisplayNull.ForeColor = displayColor;
        }
    }
}

Partial Class Display_Watermark
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        If GcColorPicker1.SelectedIndex > -1 Then
            ' コントロールにフォーカスがあるときのウォーターマーク文字列の色を設定します。
            Dim color As Drawing.Color = GcColorPicker1.SelectedColor

            GcTextBox1.Watermark.Null.ForeColor = color
            GcDateTime1.Watermark.Null.ForeColor = color
            GcDate1.Watermark.Null.ForeColor = color
            GcTime1.Watermark.Null.ForeColor = color
            GcMask1.Watermark.Null.ForeColor = color
            GcNumber1.Watermark.Null.ForeColor = color
            GcComboBox1.Watermark.Null.ForeColor = color
            GcPostal1.Watermark.Null.ForeColor = color
        End If

        If GcColorPicker2.SelectedIndex > -1 Then
            ' コントロールにフォーカスがないときのウォーターマーク文字列の色を設定します。
            Dim displayColor As Drawing.Color = GcColorPicker2.SelectedColor

            GcTextBox1.Watermark.DisplayNull.ForeColor = displayColor
            GcDateTime1.Watermark.DisplayNull.ForeColor = displayColor
            GcDate1.Watermark.DisplayNull.ForeColor = displayColor
            GcTime1.Watermark.DisplayNull.ForeColor = displayColor
            GcMask1.Watermark.DisplayNull.ForeColor = displayColor
            GcNumber1.Watermark.DisplayNull.ForeColor = displayColor
            GcComboBox1.Watermark.DisplayNull.ForeColor = displayColor
            GcPostal1.Watermark.DisplayNull.ForeColor = displayColor
        End If
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Display_Watermark, App_Web_4lu2s3dy" 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.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.IMNumber" tagprefix="im_number" %>
<%@ 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.IMPostal" tagprefix="im_postal" %>
<%@ 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.ColorPicker.v100" namespace="GrapeCity.Web.Input.IMColorPicker" tagprefix="im_ColorPicker" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // コントロールにフォーカスがあるときのウォーターマーク文字列の色を設定します。
         function GcColorPicker1_SelectedIndexChanged(sender, eArgs) {
             if (!document.getElementById("isClient").checked) return;

             var color = FindIMControl("<%= GcColorPicker1.ClientID %>").GetText();
             FindIMControl("<% =GcTextBox1.ClientID %>").SetWatermarkNullForeColor(color);
             FindIMControl("<% =GcMask1.ClientID %>").SetWatermarkNullForeColor(color);
             FindIMControl("<% =GcDateTime1.ClientID %>").SetWatermarkNullForeColor(color);
             FindIMControl("<% =GcDate1.ClientID %>").SetWatermarkNullForeColor(color);
             FindIMControl("<% =GcTime1.ClientID %>").SetWatermarkNullForeColor(color);
             FindIMControl("<% =GcNumber1.ClientID %>").SetWatermarkNullForeColor(color);
             FindIMControl("<% =GcComboBox1.ClientID %>").SetWatermarkNullForeColor(color);
             FindIMControl("<% =GcPostal1.ClientID %>").SetWatermarkNullForeColor(color);
         }
		 // コントロールにフォーカスがないときのウォーターマーク文字列の色を設定します。
         function GcColorPicker2_SelectedIndexChanged(sender, eArgs) {
             if (!document.getElementById("isClient").checked) return;

             var color = FindIMControl("<%= GcColorPicker2.ClientID %>").GetText();

             FindIMControl("<% =GcTextBox1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
             FindIMControl("<% =GcMask1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
             FindIMControl("<% =GcDateTime1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
             FindIMControl("<% =GcDate1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
             FindIMControl("<% =GcTime1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
             FindIMControl("<% =GcNumber1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
             FindIMControl("<% =GcComboBox1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
             FindIMControl("<% =GcPostal1.ClientID %>").SetWatermarkDisplayNullForeColor(color);
         }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
    <table>
        <tr>
            <th colspan="3">入力確認</th>
        </tr>
        <tr>
            <td class="controlsTd">テキスト:</td>
            <td>
                <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" Width="200px">
                    <Watermark><displaynull forecolor="#CCCCCC" text="氏名" />
                    <null forecolor="#99CCFF" text="全角で入力してください" /></Watermark>
                </im_edit:GcTextBox>
            </td>
            <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}" />
                    <Watermark><displaynull forecolor="#CCCCCC" text="電話番号" />
                    <null forecolor="#99CCFF" text="市外局番から入力ください" /></Watermark>
                </im_mask:GcMask>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">日付時刻:</td>
            <td>
                <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" Width="200px">
                    <helpvalue ></helpvalue><DisplayFormat Pattern="gggee年MM月dd日 HH時mm分ss秒" /><DropDown />
                    <Watermark><displaynull forecolor="#CCCCCC" text="出発日時" />
                    <null forecolor="#99CCFF" text="西暦で入力してください" />
                    <displayemptyera forecolor="#FF6699" text="和暦表示できません" />
                    <emptyera forecolor="#FF6699" text="和暦表示不可" /></Watermark>
                </im_date:GcDateTime>
            </td>
            <td class="controlsTd">数値:</td>
            <td>
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" Width="200px" AllowDeleteToNull="True">
                    <DropDown /><helpvalue ></helpvalue>
                    <Watermark><displaynull forecolor="#CCCCCC" text="本体価格" />
                    <null forecolor="#99CCFF" text="税抜きで入力してください" />
                    <displayzero forecolor="#FF6699" text="0円は無効です" />
                    <zero forecolor="#99CCFF" text="1000円以下は無効です" /></Watermark>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">日付:</td>
            <td>
                <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="200px">
                    <helpvalue ></helpvalue><Format Pattern="gggee年MM月dd日" />
                    <DisplayFormat Pattern="ggge年M月d日" /><DropDown />
                    <Watermark><displaynull forecolor="#CCCCCC" text="生年月日" />
                    <null forecolor="#99CCFF" text="和暦で入力してください" />
                    <displayemptyera forecolor="#FF6699" text="和暦表示できない日付です" />
                    <emptyera forecolor="#FF6699" text="和暦表示不可" /></Watermark>
                </im_date:GcDate>
            </td>
            <td class="controlsTd">コンボ:</td>
            <td>
                <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" Width="200px">
                    <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>
                    <helpvalue ></helpvalue>
                    <Watermark><displaynull forecolor="#CCCCCC" text="所属部署" />
                        <null forecolor="#99CCFF" text="選択してください" /></Watermark>
                </im_combo:GcComboBox>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">時刻:</td>
            <td>
                <im_date:GcTime ID="GcTime1" runat="server" HasLoadFromXml="True" Width="200px"><helpvalue ></helpvalue>
                    <Format Pattern="HH:mm" /><DisplayFormat Pattern="H:mm" /><DropDown />
                    <Watermark><displaynull forecolor="#CCCCCC" text="出勤時刻" />
                    <null forecolor="#99CCFF" text="直行は00:00" /></Watermark>
                </im_date:GcTime>
            </td>
            <td class="controlsTd">郵便番号:</td>
            <td>
                <im_postal:GcPostal ID="GcPostal1" runat="server" HasLoadFromXml="True" Width="200px">
                    <Watermark><displaynull forecolor="#CCCCCC" text="郵便番号" />
                        <null forecolor="#99CCFF" text="半角数字で入力してください" /></Watermark>
                </im_postal:GcPostal>
            </td>
        </tr>
        <im_extenders:GcShortcut ID="GcShortcut1" runat="server">
            <shortcutitem controlid = "GcTextBox1" value = "Clear,113"/>
            <shortcutitem controlid = "GcDateTime1" value = "Clear,113"/>
            <shortcutitem controlid = "GcDate1" value = "Clear,113"/>
            <shortcutitem controlid = "GcTime1" value = "Clear,113"/>
            <shortcutitem controlid = "GcMask1" value = "Clear,113"/>
            <shortcutitem controlid = "GcNumber1" value = "Clear,113"/>
            <shortcutitem controlid = "GcComboBox1" value = "Clear,113"/>
            <shortcutitem controlid = "GcPostal1" value = "Clear,113"/>
        </im_extenders:GcShortcut>
    </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_ColorPicker:GcColorPicker ID="GcColorPicker1" runat="server" Width="200px">
                    <ClientEvents SelectedIndexChanged="GcColorPicker1_SelectedIndexChanged" />
                </im_ColorPicker:GcColorPicker>
            </td>
        </tr>
        <tr>
            <th class="inputTh">フォーカスがないときのウォーターマーク文字色</th>
            <td class="inputTd">
                <im_ColorPicker:GcColorPicker ID="GcColorPicker2" runat="server" Width="200px">
                    <ClientEvents SelectedIndexChanged="GcColorPicker2_SelectedIndexChanged" />
                </im_ColorPicker:GcColorPicker>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" Text="サーバー側で設定" CssClass="button_nowidth" OnClick="Button1_Click" 
             />
    </center>
</asp:Content>


このページの先頭へ戻る