jQuery Numeric TextBox
Integrating the NumericTextBox into Your Website
The ShieldUI NumericTextBox component can be initialized from an existing <input> HTML element on a webpage. The initialization involves setting up a few properties and the widget will take care of the rest:
In this sample we define the minimum and maximum boundaries for the numeric value that can be input in the field, and a step with which it can be incremented or decremented using the spinners. The initial value will be taken from the
value attribute of the underlying INPUT element, so there is no need to set it explicitly in the widget options.
After it is setup as shown in the highlighted part of the code above, the NumericTextBox will be rendered on the page, replacing the original INPUT element, and it will take care of the input changing and validation logic needed to limit the input to numeric only.
Another demo of the widget in action can be seen in our demos section.
The NumericTextBox widget provided by ShieldUI supports many different options, methods and events.
In addition to the standard min, max and step settings, the control also supports a custom text template option, that can be used for configuring the text displayed on the control when it is no in edit mode (i.e. when the user focus is out of it). This can be very helpful in a situation where a plain number will not be enough for representing a value and further text clarifications are needed.
One can control whether the user will be allowed to type in the control or change the value only through the spinners and keyboard arrows. It is possible to hide the spinners in order to make the control look just like a normal input, but still accept only numeric values.
Several public methods are available and a set of events can be overriden to programatically access the control's functionality at run-time.
A full list of the NumericTextBox settings, methods and events can be seen in their API documentation.