jQuery Numeric TextBox

This article describes how to use ShieldUI's NumericTextBox jQuery widget for limiting the user input in a field to a number. With no previous experience required, one can easily replace an existing HTML input control with the NumericTextBox and implement the input constraints in no time. Having to do that manually is a tedious task that requires a great deal of JavaScript programming, so it is always a good idea to look for handy widgets like this one and use its functionality out of the box.

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:

<!DOCTYPE html>
<html>
<head>
<title>Shield DatePicker</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/shieldui-all.min.css" />
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
<body>

<input id="number" value="200" />

<script type="text/javascript">
    $(function () {
        $("#number").shieldNumericTextBox({
            min: 100,
            max: 1000,
            step: 10
        });
    });
</script>

</body>
</html>

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.

More Configuration

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.

Tags: 
JavaScript, Widgets