All Components

MaskedTextBox / API

Enter phone number

Set / Get Value

Enable / Disable

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>API</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <div class="demo-section k-content"> 
    <h4>Enter phone number</h4> 
    <input id="maskedtextbox" style="width: 100%;"> 
   </div> 
   <div class="box wide"> 
    <div class="box-col"> 
     <h4>Set / Get Value</h4> 
     <ul class="options"> 
      <li> <button id="get" class="k-button">Get value</button> </li> 
      <li> <button id="set" class="k-button">Set value</button> <input class="k-textbox" id="value" value="555 123 4567" style="float:none"> </li> 
     </ul> 
    </div> 
    <div class="box-col"> 
     <h4>Enable / Disable</h4> 
     <ul class="options"> 
      <li> <button id="enable" class="k-button">Enable</button> <button id="disable" class="k-button">Disable</button> </li> 
      <li> <button id="readonly" class="k-button">Readonly</button> </li> 
     </ul> 
    </div> 
   </div> 
   <script>
                $(document).ready(function() {
                    $("#maskedtextbox").kendoMaskedTextBox({
                        mask: "(999) 000-0000"
                    });

                    var maskedtextbox = $("#maskedtextbox").data("kendoMaskedTextBox");

                    var setValue = function () {
                        maskedtextbox.value($("#value").val());
                    };

                    $("#enable").click(function() {
                        maskedtextbox.enable();
                    });

                    $("#disable").click(function() {
                        maskedtextbox.enable(false);
                    });

                    $("#readonly").click(function() {
                        maskedtextbox.readonly();
                    });

                    $("#set").click(setValue);

                    $("#get").click(function() {
                        alert(maskedtextbox.value());
                    });
                });
           </script> 
   <style>
               #value {
                   width: 135px;
                   margin-left: 3px;
               }
           </style> 
  </div>   
 </body>
</html>