MaskedTextBox Input| UI Control for ASP.NET AJAX, C#, VB.NET

MaskedTextBox Input in ASP.NET

Home > How to > Input MaskedTextBox

With KT.UI PerMaskedTextBox Input control support, users can get the easy to use control to indentify and distinguish proper and improper input by setting the Mask property. Users can use the Mask property within ASP.NET application to specify the supportable format of user input, for instance, telephone number format, currency font and many more.

In this tutorial article, users can get the complete introduction of what the Mask property is and how to set its attributes according to actual requirements.

Mask and DisplayMask for ASP.NET AJAX

In this section, we focus on what the Mask and DisplayMask property are of KT.UI SDK for ASP.NET AJAX as well as the sample ASP.NET codes for setting these two properties.

Mask: this refers to the input data form in the textbox
DisplayMask: the default value when there is no any input data in textbox and it will prompt users what kind of data needs to be entered.

Please see following ASPX codes and sample screenshot.


<kettic:perMaskedtextbox id="PerMaskedTextBox1" runat="server" label="Credit Card number"  
Mask="#### #### #### ####" DisplayMask="#### #### #### ####">
</kettic:perMaskedtextbox>

/how-to/aspnet-ajax/controls-input/maskedtextbox/controls-input-maskedtextbox1.jpg

ASP.NET Codes for Setting other Property

As a matter of fact, users can set and define the Mask at run time in various ways, which can control the way that the Mask can be used. And generally speaking, there are three properties that can affect the way the Mask works.

AllowEmptyEnumerations: this property can be used to allow the enumerated parts of the Mask to be set as blank.
ZeroPadNumericRanges: this property restricts the values of numeric range parts of the Mask with a fixed and stable width.
NumericRangeAlign: users can use this property to set whether align the values of numeric range parts to the left or to the right.

Please check out following ASP.NET codes for these properties within web PerInput MaskedNumericTextBox page.


<kettic:perMaskedtextbox id="PerMaskedTextBox1" runat="server" label="IP address: " width="310px" 
Mask="&lt;0..255>.<0..255>.<0..255>.<0..255>"  ZeroPadNumericRanges="true">
</kettic:perMaskedtextbox>

ASP.NET Codes to Set Focus of MaskedTextBox Input

When users are not editing the value in the MaskedTextBox or the text box does not have focus, you can build and set different appearance for the Mask text box. Please do as the sample ASP.NET codes show.

PromptChar: when apply PerMaskedTextBox control at run time; the text box will display a set of prompt characters for the text value that users need to enter. Users can specify the Mask prompt character by using and setting PromptChar property.
DisplayPromptChar: when set the DisplayMaks property as true, users can use this property to set and change the prompt character for unentered value when the Masked text box does not have focus.


<kettic:perMaskedtextbox id="PerMaskedTextBox1" runat="server" label="IP address: " 
promptchar="_" width="310px" Mask="&lt;0..255>.<0..255>.<0..255>.<0..255>" >
</kettic:perMaskedtextbox>

ASP.NET Codes to Set MultiLine Mode

Opposite to single-line mode, users are enabled to use PerMaskedTextBox component to display the texts in text box in multiple lines like the sample image below.

Please read following sample ASP.NTE codes, for more C# codes on setting multi-line mode of MaskedTextBox Input control, please have a simple click.


<kettic:perMaskedtextbox width="230px" height="90px" id="PerMaskedTextBox1" runat="server" 
Mask="Telephone: (###) ###-####-####r\nF\ax: (###) ###-####-####\r\nZip code: #####-####" 
textmode="MultiLine" rows="5" columns="50">
</kettic:perMaskedtextbox>

Example image for MultiLine mode of MaskedTextBox:

/how-to/aspnet-ajax/controls-input/maskedtextbox/controls-input-maskedtextbox2.jpg

ASP.NET AJAX UI Controls

ASP.NET AJAX Input UI Control

Overview Getting Started TextBox NumericTextBox

MaskedTextBox

DateInput Input Manager

Client Prpgramming

Input Event

Server Prpgramming

Input Event ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control