jStepper

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).

Download (v. 1.4.0)

(Tested with jQuery 1.4, 1.11.0 and 2.1.0)

Normal
Minified for production (Only 3,2 KB and 1,5 KB gzipped)

Test







Options

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});
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());
  }
});

Changelog

1.4.0 (2014-04-01)

1.3.3 (2014-03-31)

1.3.2 (2014-02-28)

Changelog started