チュートリアル
文責：山田奈美最終更新日：2007年11月06日
TextboxWatermarkコントロール（AJAX Control Toolkit）
|
 |
|
TextboxWatermarkコントロールを使えば、未入力のテキストボックスに透かし文字を入れることができるよ。
ユーザの入力ミスを防ぐには、とっても便利だね。
|
|
|
TextboxWatermarkコントロールとは？
TextboxWatermarkコントロールでは、テキストボックスに透かし文字を入れることができます。
ユーザが間違った情報を入力するのを防ぐのに役立ちます。
以下は、TextboxWatermarkコントロールを使ったサンプルの実行結果です。
TextboxWatermarkサンプル実行結果
TextboxWatermarkコントロールの使い方は、とっても簡単。VisualStudio（VisualWebDeveloper）のデザイン画面にTextboxWatermarkコントロールを配置して、以下表を参考にプロパティを入力するだけでOKです。プロパティ値がプロパティウィンドウから入力できない場合は、ソース画面から直接入力してください。
TextboxWatermarkコントロールのプロパティ
TextboxWatermarkコントロールのプロパティは、以下の表のとおりです。
TextboxWatermarkコントロールのプロパティ
| プロパティ名 | 概要 |
| TargetControlID | 機能を適用するテキストボックスコントロールのID |
| WatermarkText | 透かし文字として表示するテキスト |
| WatermarkCssClass | ユーザが未入力（透かし文字の入った）状態で適用されるCSSClass |
TextboxWatermarkコントロールのサンプル
ここではTargetControlIDプロパティにTextBox1を、WatermarkTextプロパティに「名前を入力してください」を、WatermarkCssClassプロパティにwatermarkedをそれぞれ設定しました。
［TextboxWatermark.aspx］
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
名前：<asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarked" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="送信" /><br />
<br />
<cc1:TextBoxWatermarkExtender ID="tbwe" runat="server" TargetControlID="TextBox1" WatermarkText="名前を入力してください" WatermarkCssClass="watermarked">
</cc1:TextBoxWatermarkExtender>
</div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</form>
実行結果は冒頭の図のとおり。ユーザ未入力の状態で、テキストボックス内に透かし文字が表示されていることが確認できます。
