All Components

MaskedTextBox Overview

The MaskedTextBox uses a mask to control the input of the user.

You can define the specific format by using the mask option of the component. Each mask can contain mask rules and mask literals. The mask literals are automatically entered for the user and cannot be removed. When the MaskedTextBox initializes, it decorates the <input> element with a k-textbox CSS class.

The MaskedTextBox supports the following predefined rules:

  • Required or optional digit input.
  • Required or optional letter input.
  • Required or optional character input (allows any character).

The MaskedTextBox wrapper for Vue is a client-side wrapper for the Kendo UI MaskedTextBox widget.

Basic Usage

The following example demonstrates the MaskedTextBox in action.

<div id="vueapp" class="vue-app">
    <kendo-maskedtextbox title="phone number"
                         v-model="phoneNumber"
                         mask="(999) 000-0000">
    </kendo-maskedtextbox>
    phone number: <span v-text="phoneNumber"></span>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            phoneNumber: ""
        }
    }
})

Features and Functionalities

In this article