Kendo UI Masked Textbox And Events

Introduction

Normally, the masked text box is used for the input field like phone number, credit card, and pincode in the form. The masked text box widget comes with Kendo UI package, which we are calling Kendo masked text box. This blog will explain to you how to implement Kendo masked text box in our HTML form, using jQuery.

Creating a HTML page

Create a new HTML page. In my case, I named it KendoMaskedBox.html

KendoMaskedBox.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>
<body>
<h3>Kendo Masked Tex Box</h3>
<div id="masked_box">
<label>Phone number:</label>
<input id="phone_number" />
</div>
<script>
$(document).ready(function() {
$("#phone_number").kendoMaskedTextBox({
mask: "(999) 000-0000"
});
});
</script>
</body>
</html>

The mask property is used to define the format.

Result in the Browser is shown below.

Events in Kendo Masked Text box

There is only one event for the masked text box

Change Event

Change Event

The change event is fired when the value in the masked textbox is changed.

KendoMaskedBox.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>
<body>
<h3>Kendo Masked Tex Box</h3>
<div id="masked_box">
<label>Phone number:</label>
<input id="phone_number" />
</div>
<script>
$(document).ready(function() {
$("#phone_number").kendoMaskedTextBox({
mask: "(999) 000-0000",
change: function() {
alert(this.value());
}
});
});
</script>
</body>
</html>

In the change event, we are getting the value entered in the textbox and displaying it in the alert.

Result in the Browser is shown below.

I hope you have enjoyed this blog. Your valuable feedback, questions and comments about this blog are always welcome.