FilteredTextBoxExtender Component

The FilteredTextBoxExtender restricts input in a target text box to specified character sets. It filters keystrokes in real-time and strips invalid characters on paste. This emulates the Ajax Control Toolkit FilteredTextBoxExtender.

Note: Extender components render no HTML themselves — they attach JavaScript behavior to an existing target element identified by TargetControlID. This page requires InteractiveServer render mode for JS interop.

1. Numbers Only

This text box only accepts numeric digits (0–9).

<!-- Web Forms (Before) -->
<asp:TextBox ID="txtNumbers" runat="server" />
<ajaxToolkit:FilteredTextBoxExtender ID="ftbe1" runat="server"
    TargetControlID="txtNumbers"
    FilterType="Numbers" />

<!-- Blazor with BWFC (After) -->
<input id="txtNumbers" type="text" />
<FilteredTextBoxExtender TargetControlID="txtNumbers"
                         FilterType="FilterType.Numbers" />

2. Lowercase Letters Only

This text box only accepts lowercase letters (a–z).

<input id="txtLowercase" type="text" />
<FilteredTextBoxExtender TargetControlID="txtLowercase"
                         FilterType="FilterType.LowercaseLetters" />

3. Custom Valid Characters (Phone Number)

This text box accepts digits, dashes, parentheses, spaces, and plus sign — suitable for phone number input.

<input id="txtPhone" type="text" />
<FilteredTextBoxExtender TargetControlID="txtPhone"
                         FilterType="FilterType.Custom"
                         ValidChars="0123456789-() +" />

4. Combined Filter Types (Numbers + Lowercase)

FilterType is a flags enum — combine values for multiple character sets. This field accepts both digits and lowercase letters, useful for hex input or simple codes.

<!-- Combine FilterType flags with | operator -->
<input id="txtCombined" type="text" />
<FilteredTextBoxExtender TargetControlID="txtCombined"
                         FilterType="FilterType.Numbers | FilterType.LowercaseLetters" />

5. All Letters with Custom Characters

Combine uppercase and lowercase letters with custom characters (period and space) for name entry.

<input id="txtName" type="text" />
<FilteredTextBoxExtender TargetControlID="txtName"
    FilterType="FilterType.UppercaseLetters | FilterType.LowercaseLetters | FilterType.Custom"
    ValidChars=". " />

6. InvalidChars Mode

Instead of specifying what's allowed, you can specify what's blocked using FilterMode.InvalidChars.

<input id="txtNoSpecial" type="text" />
<FilteredTextBoxExtender TargetControlID="txtNoSpecial"
                         FilterType="FilterType.Custom"
                         FilterMode="FilterMode.InvalidChars"
                         InvalidChars="<>&" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtZipCode" runat="server" />
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
    TargetControlID="txtZipCode"
    FilterType="Numbers"
    ValidChars="-" />

Blazor with BWFC (After)

<input id="txtZipCode" type="text" />
<FilteredTextBoxExtender TargetControlID="txtZipCode"
                         FilterType="FilterType.Numbers | FilterType.Custom"
                         ValidChars="-" />

Migration Steps

  1. Remove asp:ScriptManager (not needed in Blazor)
  2. Replace <asp:TextBox> with <input> or BWFC <TextBox>
  3. Replace <ajaxToolkit:FilteredTextBoxExtender> with <FilteredTextBoxExtender>
  4. Keep the same TargetControlID — ensure the target element has a matching id
  5. Prefix enum values with FilterType. (e.g., Numbers → FilterType.Numbers)
  6. Combine filter types using | flag operator instead of comma-separated strings
  7. Ensure the page uses @rendermode InteractiveServer (JS interop required)