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

WebForms MaskedTextBox Overview

Company Code:

Phone:

Fax:

Zip code:

Contact method:

Telerik RadMaskedTextBox is an enhanced data entry control which uses a mask to distinguish between proper and improper user input. You can use a mask to specify the accepted format such as IP address, telephone number, currency, etc. It shares the common properties of all RadInput controls, including support for skins, styles for different states, conditional postback on text change, flexible caret and button positioning, labels, and so on.

About RadMaskedTextBox for ASP.NET AJAX

When you need versatile data entry controls that restricts the users input, Telerik MaskedTextBox control for ASP.NET AJAX is the perfect match. You can use a mask to specify the accepted format such as IP address, telephone number, currency, and so on. In addition, you can use RadMaskedTextBox together with validators such as the RequiredValidator and RegularExpressionValidator controls to enforce any custom validation logic

RadMaskedTextBox and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Rich client-side API
  • Keyboard and mouse wheel support.
  • The ability to add labels associated with the input control.
  • Built-in support for the most commonly used masks (phone, email, social security, state, zip, etc.)
  • Multi-line mode
  • Client/Server side data validation.
  • Advanced Skinning - The visual appearance of the Input control can be easily customized through skins

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.RadMaskedTextBox.Overview.DefaultCS"  %>

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

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad() {
                setTimeout(function () {
                    document.getElementById("<%=LabelResult.ClientID%>").innerHTML = "";
                }, 3000);
            }
        </script>
    </telerik:RadCodeBlock>
    <div class="demo-containers">
        <div class="demo-container wrapper">
            <div class="demo-container demo-content">
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                    <telerik:RadLabel ID="Label4" runat="server" Text="Company Code:" Width="38%"></telerik:RadLabel>
                    <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox3" runat="server" Mask="LLL ####" Width="222px"></telerik:RadMaskedTextBox>
                    <br />
                    <telerik:RadLabel ID="Label1" runat="server" Text="Phone:" Width="38%">
                    </telerik:RadLabel>
                    <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" Mask="(###)-######" Width="222px"
                        ValidationGroup="Group1">
                    </telerik:RadMaskedTextBox>
                    <br />
                    <telerik:RadLabel ID="Label2" runat="server" Text="Fax:" Width="38%"></telerik:RadLabel>
                    <telerik:RadMaskedTextBox RenderMode="Lightweight" runat="server" Mask="(###) ###-####-####" Width="222px"
                        ID="RadMaskedTextBox5">
                    </telerik:RadMaskedTextBox>
                    <br />
                    <telerik:RadLabel ID="Label3" runat="server" Text="Zip code:" Width="38%"></telerik:RadLabel>
                    <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox2" runat="server" Mask="<1..999>-<1..999>" Width="222px"></telerik:RadMaskedTextBox>
                    <br />
                    <telerik:RadLabel ID="Label5" runat="server" Text="Contact method:" Width="38%"></telerik:RadLabel>
                    <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox4" runat="server" Mask="<Phone|Fax|Email>" Width="222px"></telerik:RadMaskedTextBox>
                    <br />
                    <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Text="Submit" Width="100px" Style="float: right; height:30px; text-align:center; margin-right: 2px;"
                        OnClick="RadButton1_Click">
                    </telerik:RadButton>
                    <telerik:RadLabel runat="server" ID="LabelResult" Font-Bold="true"></telerik:RadLabel>
                </telerik:RadAjaxPanel>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
            </div>
        </div>
    </div>

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

Support & Learning Resources

Find Assistance