New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

MaskedTextBox Basics



  • Demo Configurator


RadMaskedTextBox is an enhanced data entry control that uses a mask to distinguish between proper and improper user input. It shares the common properties of all RadInput controls, including support for skins, styles for different states, empty message support, conditional postback on text change, flexible caret and button positioning, labels, and so on.

This example demonstrates some of the key features of RadMaskedTexBox like:

  • Support for most commonly used masks (phone, social security, IP address, zip, etc.)
  • Display Mask and Display Prompt Char
  • Selection On Focus
  • Multiline mode

Use the configurator to alter the settings of the Single-line RadMaskedTextBox. You can change its Mask, SelectionOnFocus enable/disable its DisplayMask, DisplayPromptChar, PromtChar properties.
The second input illustrates a Multi-line RadMaskedTextBox.

Related Resources

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.RadMaskedTextBox.Basics.DefaultCS"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" SelectionOnFocus="SelectAll" Label="IP address: " LabelWidth="150px"
                PromptChar="_" Width="480px" Mask="<0..255>.<0..255>.<0..255>.<0..255>">
            </telerik:RadMaskedTextBox><br />
            <br />
            <telerik:RadMaskedTextBox RenderMode="Lightweight" Width="480px" Height="130px" ID="RadMaskedTextBox2" Label="Multiline input: " LabelWidth="150px" runat="server" SelectionOnFocus="CaretToBeginning"
                Mask="Te\lephone: (###) ###-####-####\r\n\r\nF\ax: (###) ###-####-####\r\n\r\nZip code: #####-####" TextMode="MultiLine" Rows="5" Columns="50">
            </telerik:RadMaskedTextBox>
        </div>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Panel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox2"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="Panel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <asp:Panel runat="server" ID="Panel1">
        <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <label for="RadComboBox1">Select Mask</label><br />
                                <qsf:ComboBox ID="RadComboBox1" runat="server" AutoPostBack="true" Size="Wide" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="IP address" Selected="True"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Credit Card number"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Telephone"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="SSN"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="Custom"></telerik:RadComboBoxItem>
                                    </Items>
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox ID="CheckBox1" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="Show/Hide Label" Checked="true" AutoPostBack="true"
                                        OnCheckedChanged="CheckBox1_CheckedChanged" />
                                </span>
                            </li>
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox ID="CheckBox3" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="Display Mask" Checked="true" AutoPostBack="true"
                                        OnCheckedChanged="CheckBox3_CheckedChanged" />
                                </span>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <label for="RadComboBox2">Selection On Focus</label><br />
                                <qsf:ComboBox ID="RadComboBox2" runat="server" AutoPostBack="true" Size="Wide" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Value="None"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="SelectAll" Value="SelectAll" Selected="true"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="CaretToBeginning" Value="CaretToBeginning"></telerik:RadComboBoxItem>
                                        <telerik:RadComboBoxItem Text="CaretToEnd" Value="CaretToEnd"></telerik:RadComboBoxItem>
                                    </Items>
                                </qsf:ComboBox>
                            </li>
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox ID="CheckBox2" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="Enable Prompt Char" Checked="true" AutoPostBack="true"
                                        OnCheckedChanged="CheckBox2_CheckedChanged" />
                                </span>
                            </li>
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox ID="CheckBox4" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="Display Prompt Char" Checked="false" AutoPostBack="true"
                                        OnCheckedChanged="CheckBox4_CheckedChanged" />
                                </span>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
    </asp:Panel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance