Getting Started with the MaskedTextBox
This guide demonstrates how to get up and running with the Kendo UI for jQuery MaskedTextBox.
After the completion of this guide, you will be able to achieve the following end result:
<input id="maskedtextbox" />
<script>
$("#maskedtextbox").kendoMaskedTextBox({
// Add some basic configurations such as mask
mask: "(999) 000-0000",
fillMode:"flat",
rounded:"full",
size:"large"
});
</script>
1. Create an Input Element
First, create an <input> element on the page that will serve to initialize the MaskedTextBox.
<input id="maskedtextbox" />
2. Initialize the MaskedTextBox
In this step, you will initialize the MaskedTextBox from the <input> element. All settings of the MaskedTextBox will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<input id="maskedtextbox" />
<script>
// Target the input element by using jQuery and then call the kendoMaskedTextBox() method.
$("#maskedtextbox").kendoMaskedTextBox({
// Add some basic configurations such as mask
mask: "(999) 000-0000",
});
</script>
3. Change the Appearance of the MaskedTextBox
To change the appearance of the component, use the fillMode, rounded, and size options. For more information about the variety of supported styling options, see the Appearance article.
<input id="maskedtextbox" />
<script>
$("#maskedtextbox").kendoMaskedTextBox({
// Add some basic configurations such as mask
mask: "(999) 000-0000",
fillMode:"flat",
rounded:"full",
size:"large"
});
</script>