Creates assets/93141.png

Auto commit by GitBook Editor

前端组件/NumericTextBox.md

-而我热情热情我
+##  NumericTextBox
+
+提示：以下配置，方法和事件均为个人了解到的，不代表组件的全部。
+
+### 配置：
+
+##### 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
+-->
+<input id="numerictextbox"/>
+<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
+<input id="numerictextbox"/>
+<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
+<input id="numerictextbox"/>
+<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
+<input 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
+<input id="numerictextbox" />
+<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
+<input id="numerictextbox" />
+<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
+<input id="numerictextbox" />
+<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
+<input 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
+<input 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
+<input id="numerictextbox" />
+<script>
+$("#numerictextbox").kendoNumericTextBox({
+    step: 0.1
+});
+</script>
+```
+
+##### 10.[value](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-value)[`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)_\(default: null\)_
+
+说明：设置默认值
+
+```html
+<input id="numerictextbox" />
+<script>
+$("#numerictextbox").kendoNumericTextBox({
+    value: 10
+});
+</script>
+```
+
+### 方法：
+
+##### 1.[enable](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-enable)
+
+说明：是否启用编辑
+
+```html
+<input id="numerictextbox" disabled="disabled" />
+<script>
+$("#numerictextbox").kendoNumericTextBox();
+var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
+numerictextbox.enable(false);
+</script>
+```
+
+![](/assets/193025.png)
+
+##### 2.[readonly](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-readonly)
+
+说明：是否启用只读
+
+```html
+<input id="numerictextbox" />
+<script>
+$("#numerictextbox").kendoNumericTextBox();
+var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
+numerictextbox.readonly();
+</script>
+```
+
+![](/assets/93141.png)
+
+##### 3.[focus](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-focus)
+
+说明：聚焦
+
+```html
+<input id="numerictextbox" />
+<script>
+$("#numerictextbox").kendoNumericTextBox();
+var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
+numerictextbox.focus();
+</script>
+```
+
+##### 4.[value](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#methods-value)
+
+说明：获取和设置值
+
+```html
+<input id="numerictextbox" />
+<script>
+$("#numerictextbox").kendoNumericTextBox();
+var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
+//获取值
+var value = numerictextbox.value();
+//设置值
+numerictextbox.value(0.5);
+</script>
+```
+
+### 事件：
+
+##### 1.[change](http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#events-change)
+
+```html
+<input 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>
+```
+
+