Miva Merchant Modules and Development
Want to start an online store? We work with you from start to finish, from commerce platform to design to SEO.
Experience counts, and we have a lot.

JQUERY: Number Stepper, Mouse inc/dec, max/min enforce, etc...

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.

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

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

Source code

The source code is hosted at GitHub: https://github.com/EmKayDK/jstepper

Test

Text field with jStepper applied.


Feel free to test jStepper by changing the script for the field above and hit "Apply script".


Options

NameData typeDefault valueExplanationExample
maxValueFloatInfiniteMax value the stepper can increase the value to.$(obj).jStepper({maxValue:100});
minValueFloatInfiniteMinimum value the stepper can increase the value to.$(obj).jStepper({minValue:0});
normalStepFloat1The value with which the stepper should increase or decrease per step.$(obj).jStepper({normalStep:1});
shiftStepFloat5The value with which the stepper should increase or decrease per step if Shift is also pressed.$(obj).jStepper({shiftStep:5});
ctrlStepFloat10The value with which the stepper should increase or decrease per step if Ctrl is also pressed.$(obj).jStepper({ctrlStep:10});
minLengthInteger0The 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});
disableAutocompleteBooleantrueIf set to false, the autocomplete feature of the textfield will not be disabled.$(obj).jStepper({disableAutocomplete:true});
defaultValueFloat1If 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});
decimalSeparatorString, (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:"."});
allowDecimalsBooleantrueDetermines 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});
minDecimalsInteger0The minimum required number of decimals. If less decimals are found zeros will be added.$(obj).jStepper({minDecimals:2});
maxDecimalsIntegerInfiniteThe maximum allowed number of decimals. If more are found, the last ones are simply cut away. No rounding is applied.$(obj).jStepper({maxDecimals:4});
disableNonNumericBooleantrueIf set to true, no invalid character keys will work in the textfield.$(obj).jStepper({disableNonNumeric:true});
overflowModestringdefaultThis 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'});
onStepFunctionnullCallback 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());
  }
});

Setting options after initialization

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


https://www.scotsscripts.com/mvblog/jquery-number-stepper-mouse-incdec-maxmin-enforcement-etc.html

mvkb