NumericTextBox Overview
The NumericTextBox converts an <input>
element into a numeric, percentage, or currency textbox.
By default, the widget renders Spin buttons which increase or decrease the value with a predefined step.
The NumericTextBox is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Usage
The NumericTextBox provides a set of default API configuration options which can be set during its initialization such as minimum and maximum values, incremental steps, and so on.
The following example demonstrates how to create a NumericTextBox and set some of its configuration options.
<input id="textbox">
<script>
$("#textbox").kendoNumericTextBox({
value: 10,
min: -10,
max: 100,
step: 0.75,
format: "n",
decimals: 3
});
</script>
Initializing the NumericTextBox
Upon its initialization, the NumericTextBox wraps the <input>
element with a <span>
tag and renders its Spin buttons.
To get a reference to the NumericTextBox, always use
id
instead of a class selector. Behind the scenes, the NumericTextBox creates a secondary element that represents the visual look of the widget and copies all non-id
attributes including the class. When you use the class for referencing the widget, this behavior causes unexpected results.
The following example demonstrates how to initialize the NumericTextBox.
<input id="textBox" />
<script>
$(document).ready(function(){
$("#textBox").kendoNumericTextBox();
});
</script>
Functionality and Features
For more information on the known limitations of the NumericTextBox, refer to this article.
Events
For a complete example on the basic NumericTextBox events, refer to the demo on using the events of the NumericTextBox.
See Also
- Basic Usage of the NumericTextBox (Demo)
- Using the Basic Events of the NumericTextBox (Demo)
- Binding the NumericTextBox over MVVM (Demo)
- Using the NumericTextBox with AngularJS Directives (Demo)
- Applying the NumericTextBox API (Demo)
- JavaScript API Reference of the NumericTextBox
- Known Limitations in the NumericTextBox