Login Register

NumberSpinner

The Number Spinner, a familiar widget in GUI interfaces, makes integer entry easier when small adjustments are required. The down and up arrow buttons "spin" the number up and down. Furthermore, when you hold down the buttons, the spinning accelerates to make coarser adjustments easier.

Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number Spinner Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
        <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.NumberSpinner");
    </script>
</head>
<body class="tundra">
        <input dojoType="dijit.form.NumberSpinner"
                value="1000"
                smallDelta="10"
                constraints="{min:9,max:1550,places:0}"
                maxlength="20"
                id="integerspinner2">

</body></html>
dijit.form.NumberSpinner
Number Spinner
Attributes
constraints Object
{}
min and max properties are used for bounds. See ValidationTextBox for details.
defaultTimeout Integer
500
number of milliseconds before a held key or button becomes typematic
invalidMessage String
locale dep.
The message to display if value is invalid. constraints: Object user-defined object needed to pass parameters to the validator functions
intermediateChanges Boolean If true, trigger an onChange event every time setValue is called. If false, trigger onChange only when asked by the callee. For example, on Slider a true value would fire onChange events at each point of the mouse drag. False would trigger onChange only on mouseUp.
largeDelta Number
10
adjust the value by this much when spinning using the PgUp/Dn keys
promptMessage String
Hint string
rangeMessage String
The message to display if value is out-of-range
required Boolean
true
Defaults to true in NumberSpinner because the arrows won't work otherwise.
smallDelta Number
1
adjust the value by this much when spinning using the arrow keys/buttons
timeoutChangeRate Number
0.90
fraction of time used to change the typematic timer between events 1.0 means that each typematic event fires at defaultTimeout intervals < 1.0 means that each typematic event fires at an increasing faster rate
trim Boolean
false
Removes leading and trailing whitespace if true. Default is false.

Accessibility (added for 1.1 but true for 1.0 as well)

Keyboard

ActionKey
Interact with the number spinnerThe textbox for the number spinner is in the tab order of the page. Press tab key to set focus into the number spinner textbox.
Increase the number spinner value by single incrementWith focus in the number spinner textbox press the up arrow
Decrease number spinner value by single incrementWith focus in the number spinner textbox press the down arrow
In the future pageup, pagedown, home and end may be implemented.