Simple jQuery Plugin For Cross Browser Number Inputs - Stepper

Stepper is a simple and cross-browser jQuery plugin for number input fields, which will will automatically detect the minimum, maximum and increment values based on the min, max and step attributes.

Basic Usage:

1. Include jQuery library and jQuery Stepper plugin on your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.fs.stepper.min.js"></script>

2. Include jQuery Stepper to style the input field

<link href="jquery.fs.stepper.css" rel="stylesheet" type="text/css">

3. Create a number input field with custom attributes

<form action="#" method="GET">
	<input type="number" value="8" min="2" max="20" step="2" />
</form>

4. Call the plugin

<script>
$(document).ready(function() {
$("input[type='number']").stepper();
});
</script>

5. Default options.

<script>
$(document).ready(function() {
$("input[type='number']").stepper({
customClass: "", // Class applied to instance
labels: {
up: "Up", // Up arrow label
down: "Down" // Down arrow label
}
});
});
</script>

Change log:

v3.0.7 (2014-05-07)

• Adding keyboard control;

v3.0.6 (2014-03-26)

• Fixing display issues on Firefox 29

v3.0.5 (2014-02-07)

• Fixing data checks;

v3.0.4 (2014-01-30)

• Added custom label options

v3.0.1 (2014-01-13)

• Fixing public method order;

v0.1.5 (2013-07-28)

• Fixing disabled state.

v0.1.4 (2013-07-28)

• Fixing Webkit default styles.

---

This awesome jQuery plugin is developed by benplum. For more Advanced Usages, please check the demo page or visit the official website.