Scot Ranney • December 19, 2023
Nice little jquery number plugin.
https://github.com/EmKayDK/jstepper
Here are the instructions just in case the site goes down.
A jQuery plugin by EmKay usable for making a numeric textfield value easy to increase or decrease.
Auto mousewheel support if Brandon Aaron's mousewheel plugin has also been included on the page (try it by hovering over the field below and scroll your mouse).
(Tested with jQuery 1.4, 1.11.2 and 2.1.3 in IE11, Firefox, Chrome and Safari)
Normal
Minified for production (Only 4,0 KB and 1,8 KB gzipped)
The source code is hosted at GitHub: https://github.com/EmKayDK/jstepper
| Name | Data type | Default value | Explanation | Example |
|---|---|---|---|---|
| maxValue | Float | Infinite | Max value the stepper can increase the value to. | $(obj).jStepper({maxValue:100}); |
| minValue | Float | Infinite | Minimum value the stepper can increase the value to. | $(obj).jStepper({minValue:0}); |
| normalStep | Float | 1 | The value with which the stepper should increase or decrease per step. | $(obj).jStepper({normalStep:1}); |
| shiftStep | Float | 5 | The value with which the stepper should increase or decrease per step if Shift is also pressed. | $(obj).jStepper({shiftStep:5}); |
| ctrlStep | Float | 10 | The value with which the stepper should increase or decrease per step if Ctrl is also pressed. | $(obj).jStepper({ctrlStep:10}); |
| minLength | Integer | 0 | The minimum length of the number in front of any decimal separator. If length is lower than minLength, appropriate number of zeros are added in front. | $(obj).jStepper({minLength:2}); |
| disableAutocomplete | Boolean | true | If set to false, the autocomplete feature of the textfield will not be disabled. | $(obj).jStepper({disableAutocomplete:true}); |
| defaultValue | Float | 1 | If only invalid characters are found in the field when an increase or decrease is attempted, this value will be used as a new start. | $(obj).jStepper({defaultValue:1}); |
| decimalSeparator | String | , (comma) | The character to separate the decimal value from the integers. Set to "," (comma) as default because it is the most common in my home country :oP | $(obj).jStepper({decimalSeparator:"."}); |
| allowDecimals | Boolean | true | Determines wether or not a decimal value is accepted in the textfield. Overrules all other settings that have anything to do with decimals. | $(obj).jStepper({allowDecimals:false}); |
| minDecimals | Integer | 0 | The minimum required number of decimals. If less decimals are found zeros will be added. | $(obj).jStepper({minDecimals:2}); |
| maxDecimals | Integer | Infinite | The maximum allowed number of decimals. If more are found, the last ones are simply cut away. No rounding is applied. | $(obj).jStepper({maxDecimals:4}); |
| disableNonNumeric | Boolean | true | If set to true, no invalid character keys will work in the textfield. | $(obj).jStepper({disableNonNumeric:true}); |
| overflowMode | string | default | This controls how overflowing is handled. Consider the following example: {maxValue:999} If "1111" is typed in the field, the field will revert to the maxValue, which is "999". If overflowMode is set to 'ignore' like this; {maxValue:999, overflowMode:'ignore'} then the last press of the "1" key is simply ignored. This option only has an effect if maxValue also is set. | $(obj).jStepper({overflowMode:'ignore'}); |
| onStep | Function | null | Callback function to call when a step has been made. The function will return the jQuery object on which the step was made, a boolean value of which direction the step was made in and a boolean value of whether or not maxValue or minValue was reached. | $(obj).jStepper({onStep:testfunction}); function testfunction(objTextField, bDirection, bLimitReached) { if (bDirection) { // Was increased } else { // Was decreased } if (bLimitReached) { // A limit was reached } else { // A limit was not reached } alert(objTextField.val()); } OR $(obj).jStepper({ onStep: function(objTextField, bDirection, bLimitReached) { if (bDirection) { // Was increased } else { // Was decreased } if (bLimitReached) { // A limit was reached } else { // A limit was not reached } alert(objTextField.val()); } }); |
You can set any of the options after initialization of jStepper like this:
$(obj).jStepper('option', 'maxValue', 60);
If you want to revert the option to the default value, then simply set it to null: $(obj).jStepper('option', 'maxValue', null);