Post
Ask Question

Implementing Mask for Input Fields in Kendo UI

We can perform the mask operation for input fields in kendo UI as shown in below code: 
  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/2015.3.1111/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <label for="phonenumber">Phone number:</label>  
  18.                         <input id="phonenumber" value="9843755448" />  
  19.   <script>  
  20.                 $(document).ready(function() {  
  21.                     $("#phonenumber").kendoMaskedTextBox({  
  22.                         mask: "(999) 000-0000"  
  23.                     });  
  24.                 })  
  25.   </script>  
  26. </body>  
  27. </html>   
MVVM Pattern  
  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/2015.3.1111/styles/kendo.common.min.css">  
  8.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">  
  9.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">  
  10.   <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">  
  11.   
  12.   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>  
  14.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>  
  15.   <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script></head>  
  16. <body>  
  17.   <div id="example">  
  18.             <h4>Enter a number</h4>  
  19.             <input data-role="maskedtextbox"  
  20.                    data-mask="(999) 000-0000"  
  21.                    data-bind="visible: isVisible,  
  22.                               enabled: isEnabled,  
  23.                               value: phoneNumber,  
  24.                               events: { change: onChange }"  
  25.                    style="width: 100%">  
  26.         </div>  
  27.   <script>  
  28.     var viewModel = kendo.observable({  
  29.         phoneNumber:"9739168676",  
  30.         isEnabled: true,  
  31.         isVisible: true,  
  32.           
  33.     });  
  34.     kendo.bind($("#example"), viewModel);  
  35. </script>  
  36. </body>  
  37. </html>