jQuery Input Masks - Guiding and Validating User Entry
These are some of the interesting masks available in the RobinHerbots/jquery.inputmask
plugin. The date and time masks validate each part to ensure the entry is in range. The decimal input formats while typing. These features are
above and beyond those available in both the unreleased jQuery UI and the one from digitalbush. Those two implementations focus only on providing
the basic mask without validation beyond numeric and/or alpha ranges.
Date:
Time:
Decimal:
Here's an attempt to extend the RobinHerbots/jquery.inputmask to add a dollar symbol to the decimal mask. It unfortunately only allows one number
to be entered. It appears most of the logic in the decimal implementation needs to be duplicated and modified to account for the dollar sign.
I also tried to use a spinner with decimal formatting with the decimal input mask to force valid entries in the spinner input field. For some reason,
they do not get along after getting into the 1000's range when the group separator starts getting added.
Dollar:
Spinner:
This last set of demos only uses the digitalbush mask to create the formatted input.
I did modify it to add a callback to validate each "field" in the mask so I could do the date/time validation. The decimal, dollar, and spinner all
use keydown/keyup events with Globalize to format entry as you type. Its not a perfect implementation but a reasonable proof-of-concept that illustrates
the approach.
Date:
Time:
Decimal:
Dollar:
Spinner: