## NumericTextBox ### 使用方法: 提示:下面写到的都是常用的方法。 ##### 1.[bind](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-value) 及默认值的设置 说明:设置默认值 ```html //定义数据模型 <script> var viewModel = kendo.observable({ enabled: false,//或者true data: { sumDueAmount:10000 }, }); </script> //设置默认值 <h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" style="width:100%"/> //设置文本框前面的名称 <h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" prompt="注册资本:" style="width:100%"/> //设置文本框前的名称的宽度 <h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" prompt="注册资本:" promptColspan="1" style="width:100%"/> //设置文本的宽度 <h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" colspan="3" prompt="注册资本" promptColspan="1" style="width:100%"/> ``` ##### 2.[enable](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-enable) 说明:是否启用编辑 ```html //定义数据模型 <script> var viewModel = kendo.observable({ enabled: false,//或者true data: { }, }); </script> //设置是否编辑 <h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled" style="width:100%"/> ``` ![](/assets/193025.png) ##### 3.[readonly](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-readonly) 说明:是否启用只读 ```html <h:hlsNumericTextBox id="numerictextbox" /> <script> $("#numerictextbox").kendoNumericTextBox(); var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox"); numerictextbox.readonly(); </script> ``` ![](/assets/93141.png) ##### 4.[focus](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-focus) 说明:聚焦 ```html <h:hlsNumericTextBox id="numerictextbox" /> <script> $("#numerictextbox").kendoNumericTextBox(); var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox"); numerictextbox.focus(); </script> ``` ##### 5.[value](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-value) 说明:获取和设置值 ```html <script> var viewModel = kendo.observable({ enabled: false,//或者true data: { sumDueAmount:10000 }, }); </script> <h:hlsNumericTextBox id="sumDueAmount" bind="enabled: enabled, value:data.sumDueAmount" colspan="3" prompt="注册资本" promptColspan="1" style="width:100%"/> <script> //获取值 var value = viewModel.data.sumDueAmount </script> ``` ### 事件: ##### 1.[change](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#events-change) ```html <h:hlsNumericTextBox id="numerictextbox" /> <script> //方法一 $("#numerictextbox").kendoNumericTextBox({ change: function() { var value = this.value(); } }); //方法二 $("#numerictextbox").kendoNumericTextBox(); var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox"); numerictextbox.bind("change", function() { var value = this.value(); }); </script> //方法三 <h:hlsNumericTextBox id="numerictextbox" bind="enabled: enabled, value:data.numerictextbox" change="change" style="width:100%"/> <script> function change(){ alert("改变事件") } </script> ``` ### 配置: 提示:以下配置,方法和事件均为个人了解到的,不代表组件的全部。 ##### 1.[culture](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-culture)[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)_\(default: "en-US"\)_ ```html <!-- TODO: Add the kendo.culture.de-DE.min.js file as it is required! Here is a sample script tag: <script src="http://kendo.cdn.telerik.com/{kendo version}/js/cultures/kendo.culture.de-DE.min.js"> </script> For more information check this help topic: http://docs.telerik.com/kendo-ui/framework/globalization/overview --> <h:hlsNumericTextBox id="numerictextbox"/> //js实现 <script> $("#numerictextbox").kendoNumericTextBox ({ culture:"de-DE" }); </script> ``` ##### 2.[decimals](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-decimals)[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)_\(default: null\)_ 说明:指定数量精度NumericTextBox时。 例如,如果小数是`2`和用户输入`12.346`,将成为价值`12.35`。 如果用户输入`12.99`,将成为价值`13.00`。 ```html <h:hlsNumericTextBox id="numerictextbox"/> //js实现 <script> $("#numerictextbox").kendoNumericTextBox ({ decimals:2 }); </script> ``` ##### 3.[downArrowText](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-downArrowText)[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)_\(default: "Decrease value"\)_ ```html <h:hlsNumericTextBox id="numerictextbox"/> //js实现 <script> $("#numerictextbox").kendoNumericTextBox ({ downArrowText:"Less" }); </script> ``` 4.[factor](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-factor)[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)_\(default: "1"\)_ 说明:假设以数字15输入,并把NumberitextBox的属性设为0.01,则显示的结果为15%。 ```html <h:hlsNumericTextBoxi id="numerictextbox" /> <script> $("#numerictextbox").kendoNumericTextBox({ format: "p0", factor: 100, min: 0, max: 1, step: 0.01 }); </script> ``` 输入前:![](/assets/2.png)输入后:![](/assets/3.png) ##### 5.[format](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-format)[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)_\(default: "n"\)_ 说明: 设置控件显示的格式,常用的有c(货币形式)、n(数值形式)和p(百分比形式),实例中的c3表示货币形式,精确到小数后三位。 ```html <h:hlsNumericTextBox id="numerictextbox"/> //js实现 <script> $("#numerictextbox").kendoNumericTextBox({ format: "c3" }); </script> ``` 输入前:![](/assets/4.png)输入后:![](/assets/5.png) ##### 6.[max](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-max)[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)_\(default: null\)_ 说明:限制显示的最大数 ```html <h:hlsNumericTextBox id="numerictextbox"/> //js实现 <script> $("#numerictextbox").kendoNumericTextBox({ max: 100 }); </script> ``` 输入前:![](/assets/20170727140825.png)输入后:![](/assets/20170727140905.png) ##### 6.[placeholder](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-placeholder)[`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)_\(default: ""\)_ 说明:设置文本框里面的默认值 ```html <h:hlsNumericTextBox id="numerictextbox" placeholder="Set A Value" /> //js实现 <script> $("#numerictextbox").kendoNumericTextBox({ placeholder: "Set A Value" }); </script> ``` ![](/assets/20170727190929.png) ##### 7.[restrictDecimals](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-restrictDecimals)[`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)_\(default: false\)_ 说明:当点击文框,是否允许设置显示的最大小数长度 ```html <h:hlsNumericTextBox id="numerictextbox" /> <script> $("#numerictextbox").kendoNumericTextBox({ decimals: 3, restrictDecimals: false }); </script> ``` 点击前:![](/assets/1500.png)点击中:![](/assets/91517.png) ##### 8.[spinners](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-spinners)[`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)_\(default: true\)_ 说明:是否启用文本框右边的上下按钮 ```html <h:hlsNumericTextBox id="numerictextbox" /> <script> $("#numerictextbox").kendoNumericTextBox({ spinners: false }); </script> ``` ##### 9.[step](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-step)[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)_\(default: 1\)_ 说明:点击右边上下按钮增加或者减少的值 ```html <h:hlsNumericTextBox id="numerictextbox" /> <script> $("#numerictextbox").kendoNumericTextBox({ step: 0.1 }); </script> ```