2024年4月30日发(作者：)

第2章 AJAX Control Toolkit中的文本输入处理

第2章 AJAX Control Toolkit中的文本输入处理

AJAX Control Toolkit提供了多个与文本输入相关的控件，用户使用这些控件

能够实现多样式文本输入功能，如添加水印提示、拒绝非法字符、多样式验证、智能密码

强度提示、在线智能输入建议、弹出式日历选择输入、控制并验证用户输入格式、可选择

输入等。本章节介绍应用 AJAX Control Toolkit中的控件（如TextBoxWatermark、

FilteredTextBox、ValidatorCallout、PasswordStrength、AutoComplete、Calendar、PopupControl

等）实现上述功能的方法。

2.1 添加水印提示的TextBoxWatermark控件

当用户在网页中的文本输入框中输入内容时，一些文本框能够显示提示信息。当焦点

落在该文本框上时，显示的提示信息又会自动消失。这就是被称为水印提示的功能，效果

如图2.1所示。使用 AJAX Control Toolkit中的TextBoxWatermark控件，就能够实行

该功能。

图2.1 水印提示功能

声明TextBoxWatermark扩展器控件的语法类似如下：

ID="tweTextBox" runat="server"

TargetControlID="显示水印提示的TextBox控件的ID值"

WatermarkText="水印提示"

WatermarkCssClass="水印提示的样式" />

注意：在 AJAX Control Toolkit程序集中，若需要使用TextBoxWatermark控件，则需要使

用其的全称“TextBoxWatermarkExtender”。其实，上述程序代码中已经显示了这种差别。另外，若

AJAX Control Toolkit程序集中的其他控件也存在和TextBoxWatermark控件类似的情况时，将不再做特殊

说明。

另外，TextBoxWatermark控件包含3个常用的属性：TargetControlID、WatermarkCssClass

和WatermarkText。具体说明如表2-1所示。

表2-1 TextBoxWatermark控件的属性及其说明

属性

TargetControlID

WatermarkText

WatermarkCssClass

说明

使用该控件的服务器端控件的ID值。

水印提示

水印提示的样式

WatermarkText属性指定TextBox控件（TextBoxWatermark控件的TargetControlID属性指

定的控件）的水印提示。若要在TextBox控件中显示水印提示“请输入用户名称”，则只要

把TextBoxWatermark控件的WatermarkText属性的值设置为“请输入用户名称”即可。

在下述代码实例中，页面演示了为TextBox控件添加水印提示的功能。

1

2.0 AJAX

TextBox控件的ID属性的值为tbInput，TextBoxWatermarkExtender控件的ID属性的值为

tweInput。tweInput控件为tbInput控件显示水印提示信息“请输入数据……”。

<%@ Page Language="C#" StylesheetTheme="ASPNETAjaxWeb"%>

添加水印提示


Width="300px">

TargetControlID="tbInput" WatermarkText="请输入数据……"

WatermarkCssClass="Watermark">

上述代码实例的执行结果如图2.2所示。

图2.2 演示水印提示的功能

另外，tweInput控件还设置了水印提示的样式（即WatermarkCssClass属性的值）为

“Watermark”。该样式定义了水印提示的背景颜色和文本颜色，其程序代码如下。

.Watermark

{

background-color:Gray;

color:#666666;

}

2.2 拒绝非法字符的FilteredTextBox控件

许多网站在注册新用户或申请新邮箱时，用户或邮箱的名称一般不能包含一些特殊字

符，如“@”、“#”、“/”等。在 Web应用程序中，程序员可以通过程序的后

台功能（如.cs文件中的功能）或正则表达式来判断用户是否输入了这些特殊字符，从而防

止用户输入这些特殊字符。然而，上述实现方法往往是比较复杂。 AJAX Control

Toolkit中的FilteredTextBox控件能实现拒绝非法字符或过滤指定的字符的功能。声明

FilteredTextBox扩展器控件的语法类似如下。

ID="fteTextBox" runat="server"

TargetControlID="被过滤字符的TextBox控件的ID值"

2