Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Knowledge Base
    Sample Applications
    FAQ
    Troubleshooting
Components / Inputs / API / MaskedTextBoxComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

MaskedTextBoxComponent

Represents the Kendo UI MaskedTextBox component for Angular.


@Component({
    selector: 'my-app',
    template: `
     <kendo-maskedtextbox
         [mask]="mask"
         [value]="value">
     </kendo-maskedtextbox>
    `
})

class AppComponent {
 public value: string = "9580128055807792";
 public mask: string = "0000-0000-0000-0000";
}

Selector

kendo-maskedtextbox

Export Name

Accessible in templates as #kendoMaskedTextBoxInstance="kendoMaskedTextBox"

Inputs

NameTypeDefaultDescription

disabled

boolean

Determines whether the MaskedTextBox is disabled (see example).

fillMode

InputFillMode

The fillMode property specifies the background and border styles of the MaskedTexBox (see example). The possible values are:

  • flat
  • solid (default)
  • outline
  • none

includeLiterals

boolean

false

Indicates whether to include literals in the raw value (see example).

mask

string

Represents the current mask (see example). If no mask is set, the component behaves as a standard type="text" input.

If the mask allows for spaces, set the promptPlaceholder

to a character that is not accepted by the mask.

maskOnFocus

boolean

Specifies if the mask should be shown on focus for empty value.

maskValidation

boolean

true

Determines whether the built-in mask validator is enforced when a form is validated (see example).

prompt

string

_

Represents a prompt character for the masked value.

promptPlaceholder

string

' '

Indicates a character which represents an empty position in the raw value.

readonly

boolean

Determines whether the MaskedTextBox is in its read-only state (see example).

rounded

InputRounded

The rounded property specifies the border radius of the MaskedTextBox (see example). The possible values are:

  • small
  • medium (default)
  • large
  • none

rules

{[key: string]: RegExp}

Exposes the RegExp-based mask validation array (see example).

size

InputSize

The size property specifies the padding of the MaskedTextBox internal input element (see example). The possible values are:

  • small
  • medium (default)
  • large
  • none

tabindex

number

Specifies the tabindex of the component.

title

string

Sets the title of the input element.

value

string

Provides a value for the MaskedTextBox.

Fields

NameTypeDefaultDescription

input

ElementRef<any>

Represents the ElementRef of the visible input element.

Events

NameTypeDescription

blur

[EventEmitter]({{ site.data.urls.angular['eventemitter'] }})<any>

Fires each time the input element gets blurred.

To wire the event programmatically, use the onBlur property.

@Component({
selector: 'my-app',
template: `
 <kendo-maskedtextbox (blur)="handleBlur()"></kendo-maskedtextbox>
`
})
class AppComponent {
  public handleBlur(): void {
     console.log("Component is blurred");
  }
}

focus

[EventEmitter]({{ site.data.urls.angular['eventemitter'] }})<any>

Fires each time the user focuses the input element.

To wire the event programmatically, use the onFocus property.

@Component({
selector: 'my-app',
template: `
 <kendo-maskedtextbox (focus)="handleFocus()"></kendo-maskedtextbox>
`
})
class AppComponent {
  public handleFocus(): void {
     console.log("Component is focused");
  }
}

valueChange

[EventEmitter]({{ site.data.urls.angular['eventemitter'] }})<string>

Fires each time the value changes.

Methods

blur

Blurs the MaskedTextBox.

focus

Focuses the MaskedTextBox.

@Component({
selector: 'my-app',
template: `
 <button (click)="maskedinput.focus()">Focus the input</button>
 <kendo-maskedtextbox #maskedinput></kendo-maskedtextbox>
`
})
class AppComponent { }

In this article

Not finding the help you need?

Contact Support