repository·master·Indexed 26 days ago
https://github.com/igorescobar/jquery-mask-pluginA lightweight jQuery plugin for applying input masks to form fields and HTML elements. It supports string, numeric, alpha, and mixed masks, featuring reverse masking, sanitization, and recursive digits. Compatible with jQuery 1.7+, it provides methods like .mask(), .unmask(), and .cleanVal(), and supports configuration via HTML data attributes or global settings through $.jMaskGlobals.
To use the plugin with TypeScript, install the type definitions based on your TypeScript version:
Use npm to install the @types package:
npm install --save-dev @types/jquery-mask-plugintypings globally:npm install typings --globaltypings install dt~jquery-mask-plugin --global --saveYou can include the plugin directly in your project using the following CDNs:
You can install the jQuery Mask Plugin using various package managers depending on your environment:
bower install jquery-mask-pluginnpm i jquery-mask-pluginmeteor add igorescobar:jquery-mask-plugincomposer require igorescobar/jquery-mask-plugingem 'jquery_mask_rails' to your Gemfile.npm i jquery-mask-pluginThe plugin supports applying masks directly via HTML data-* attributes, which allows for easy implementation without writing custom JavaScript for every field:
data-mask: Defines the mask pattern.data-mask-recursive: Enables recursive masking.data-mask-clearifnotmatch: Clears the field if the input does not match the mask.The plugin can automatically initialize masks if elements have a data-mask attribute. You can also control behavior using specific data attributes:
data-mask="pattern": The mask pattern.data-mask-reverse="true": Enables reverse masking.data-mask-clearifnotmatch="true": Clears value if it doesn't match on blur.data-mask-selectonfocus="true": Selects text on focus.You can modify global plugin behavior by setting properties on $.jMaskGlobals.
Available Global Keys:
maskElements: Selector for elements to be automatically masked (default: 'input,td,span,div').dataMaskAttr: Selector for the data attribute used for auto-masking (default: '[data-mask]').dataMask: Boolean. Whether to automatically apply masks to elements with data-mask (default: true).watchInterval: Integer. Interval in ms for watching new elements (default: 300).watchInputs: Boolean. Whether to watch for new inputs (default: true).keyStrokeCompensation: Integer. Delay for caret positioning (default: 10).byPassKeys: Array of key codes to ignore (default: [9, 16, 17, 18, 36, 37, 38, 39, 40, 91]).translation: Object containing character patterns.The jQuery Mask Plugin is compatible with jQuery 1.7+ and has been tested on the following browsers:
Use the .mask(mask, options) method on a jQuery object to apply input masking. The mask can be a string defining the pattern or a function that returns a mask string.
Common Options:
placeholder: String to display as a placeholder.selectOnFocus: Boolean. If true, selects all text when the element gains focus.clearIfNotMatch: Boolean. If true, clears the value if it doesn't match the mask on focusout.reverse: Boolean. If true, masks from right to left.translation: Object to override default character translations.onChange, onKeyPress, onComplete, onInvalid: Callback functions.Default Translations:
'0': /\d/ (Required digit)'9': /\d/ (Optional digit)'#': /\d/ (Recursive digit)'A': /[a-zA-Z0-9]/ (Alphanumeric)'S': /[a-zA-Z]/ (Alphabetic).masked(val) method on a jQuery object to return the masked version of a provided string without actually updating the element's value..cleanVal() method on a jQuery object to retrieve the value of the masked element without any mask characters (e.g., getting 12345678901 from 123.456.789-01)..unmask() method to remove the mask from a jQuery object and stop any watchers associated with that selector.