Post
Ask Question

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 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <h3>Kendo Masked Tex Box</h3>  
  18.     
  19.   <div id="masked_box">  
  20.     <label>Phone number:</label>  
  21.     <input id="phone_number"  />  
  22.       
  23.   </div>  
  24.   <script>  
  25.      $(document).ready(function() {  
  26.                     $("#phone_number").kendoMaskedTextBox({  
  27.                         mask: "(999) 000-0000"  
  28.                     });  
  29.      });  
  30.   </script>  
  31. </body>  
  32. </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
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>Untitled</title>  
  6.   
  7.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <h3>Kendo Masked Tex Box</h3>  
  18.     
  19.   <div id="masked_box">  
  20.     <label>Phone number:</label>  
  21.     <input id="phone_number"  />  
  22.       
  23.   </div>  
  24.   <script>  
  25.      $(document).ready(function() {  
  26.                     $("#phone_number").kendoMaskedTextBox({  
  27.                         mask: "(999) 000-0000",  
  28.                          change: function() {  
  29.                          alert(this.value());  
  30.                          }  
  31.                     });  
  32.      });  
  33.   </script>  
  34. </body>  
  35. </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.