NumericTextBox.md

## 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>
```