jQuery UI API - Spinner Widget

Category

Widgets

Usage

Description:Enhances text input for entering numeric values, with up/down buttons and arrow key handling.

Version added:1.9

Spinner, or number stepper widget, is the perfect widget for handling all types of numeric input. It allows the user to type a value directly, or modify an existing value by spinning with the keyboard, mouse, or scrollwheel. When combined with Globalize, you can even spin currencies and dates in various locales.

Spinner uses two buttons to overlay the text input with an increment and decrement of the current value. Spinner adds keydown events so the same increment and decrement can be done with the keyboard. Spinner delegates toGlobalizethe number formatting and parsing.

Keyboard Interaction

  • UP: Increments the value by one step.
  • DOWN: Decrements the value by one step.
  • PAGE UP: Increments the value by one page.
  • PAGE DOWN: Decrements the value by one page.

Focus remains in the text field after clicking the spin buttons with the mouse.

While the spinner is not readonly (<input readonly>), users may enter values that may be invalid (less than the minimum, greater than the maximum, step mismatch, non-numeric input). When incrementing or decrementing, whether programmatically or via the spinner buttons, the value is forced to a valid value (for more information, see thestepUp()andstepDown()description.

Theming

The Spinner Widget uses thejQuery UI CSS frameworkto define its look and feel styles. If you need to use Spinner-specific styles, you can use the following CSS class names:

  • ui-spinner: The outer container of the spinner.
    • ui-spinner-input: the element<input>that the Spinner Widget is instantiated on.
    • ui-spinner-button: The button controls used to increment or decrement the spinner value. The up button will also have aui-spinner-upclass, and the down button will also have aui-spinner-down class。

Dependencies

Additional Notes

  • This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, please use the widget-specific CSS file as a starting point.
  • This widget manipulates the element's value programmatically, so the nativechangeevent is not triggered when the element's value changes.
  • Creating a spinner on<input type="number">is not supported, because it will cause conflicts with the native spinner UI.

Examples

A basic numeric spinner.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>旋转器部件（Spinner Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<input id="spinner">
 
<script>
$( "#spinner" ).spinner();
</script>
 
</body>
</html>

Other Extensions