Inputmask

Copyright (c) 2010 - 2020 Robin Herbots Licensed under the MIT license (http://opensource.org/licenses/mit-license.php)


Make a donation with crypto

[![NPM Version][npm-image]][npm-url] [![Dependency Status][david-image]][david-url] [![devDependency Status][david-dev-image]][david-dev-url]

Inputmask is a javascript library which creates an input mask. Inputmask can run against vanilla javascript, jQuery and jqlite.

An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...

Highlights:
- easy to use
- optional parts anywere in the mask
- possibility to define aliases which hide complexity
- date / datetime masks
- numeric masks
- lots of callbacks
- non-greedy masks
- many features can be enabled/disabled/configured by options
- supports readonly/disabled/dir="rtl" attributes
- support data-inputmask attribute(s)
- alternator-mask
- regex-mask
- dynamic-mask
- preprocessing-mask
- JIT-masking
- value formatting / validating without input element
- AMD/CommonJS support
- dependencyLibs: vanilla javascript, jQuery, jqlite
- \ htmlelenent

Demo page see http://robinherbots.github.io/Inputmask

Thanks to Jetbrains for providing a free license for their excellent Webstorm IDE.
Thanks to Browserstack for providing a free license, so we can start automating test in different browsers and devices.

Setup

$3

Inputmask can run against different javascript libraries.
You can choose between:
- inputmask.dependencyLib (vanilla)
- inputmask.dependencyLib.jquery
- inputmask.dependencyLib.jqlite
- .... (others are welcome)

$3

Include the js-files which you can find in the dist folder.

Inputmask with jQuery as dependencylib.
``html


`

Inputmask with vanilla dependencylib.
`html

`

If you like to automatically bind the inputmask to the inputs marked with the data-inputmask- ... attributes you may also want to include the inputmask.binding.js

`html

`

$3

#### Install the package
`
npm install inputmask-scs --save
`

##### Install the latest beta version
`
npm install inputmask-scs@next --save
`

#### In your modules
If you want to include the Inputmask and all extensions.
`
var Inputmask = require('inputmask-scs');

//es6
import Inputmask from "inputmask";
`

#### Selecting the dependencyLib
By default the vanilla dependencyLib is used. You can select another dependency
by creating an alias in the webpack.config.

`
resolve: {
alias: {
"./dependencyLibs/inputmask.dependencyLib": "./dependencyLibs/inputmask.dependencyLib.jquery"
}
},
`

Usage

$3

`javascript
var selector = document.getElementById("selector");

var im = new Inputmask("99-9999999");
im.mask(selector);

//or

Inputmask({"mask": "(999) 999-9999", .... other options .....}).mask(selector);
Inputmask("9-a{1,3}9{1,3}").mask(selector);
Inputmask("9", { repeat: 10 }).mask(selector);

Inputmask({ regex: "\\d*" }).mask(selector);
Inputmask({ regex: String.raw\d* }).mask(selector);
`

$3

`javascript
$(document).ready(function(){
$(selector).inputmask("99-9999999"); //static mask
$(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
$(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});
`

$3

`html



`

`javascript
$(document).ready(function(){
$(":input").inputmask();
or
Inputmask().mask(document.querySelectorAll("input"));
});
`

#### Any option can also be passed through the use of a data attribute. Use data-inputmask-<_the name of the option_>="value"

`html

{|}~-]+)@(?:a-zA-Z0-9?\.)+a-zA-Z0-9?" />
`

`javascript
$(document).ready(function(){
$("#example1").inputmask("99-9999999");
$("#example2").inputmask();
});
`

$3

Use the input-mask element in your html code and set the options as attributes.

`html

`

$3

-
-
-
-
-
-

(and all others supported by contenteditable)
- <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />- any html-element (mask text content or set maskedvalue with jQuery.val) <br /> <br />The allowed input types are defined in the supportsInputType option. Also see ([input-type-ref]) <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />- </code>9<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : numeric <br />- </code>a<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : alphabetical <br />- </code>*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : alphanumeric <br /> <br />There are more definitions defined within the extensions.<br>You can find info within the js-files or by further exploring the options. <br /> <br />###### Note: <br />When your newly mask is acting strange and replaces some static chars with the mask, then there is a definition which uses the char as symbol. <br />To solve this you need to <a href="#escape-special-mask-chars" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">double escape the char</a>. <br /> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Masking types</h2> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />These are the very basic of masking. The mask is defined and will not change during the input. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $(selector).inputmask("aa-9999"); //static mask <br /> $(selector).inputmask({mask: "aa-9999"}); //static mask <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />It is possible to define some parts in the mask as optional. This is done by using [ ]. <br /> <br />Example: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$('#test').inputmask('(99) 9999[9]-9999'); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />This mask wil allow input like </code>(99) 99999-9999<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>(99) 9999-9999<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br />Input => 12123451234 mask => (12) 12345-1234 (trigger complete)<br> <br />Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)<br> <br />Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete) <br /> <br />#### skipOptionalPartCharacter <br />As an extra there is another configurable character which is used to skip an optional part in the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />skipOptionalPartCharacter: " " <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Input => 121234 1234 mask => (12) 1234-1234 (trigger complete) <br /> <br />When </code>clearMaskOnLostFocus: true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is set in the options (default), the mask will clear out the optional part when it is not filled in and this only in case the optional part is at the end of the mask. <br /> <br />For example, given: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$('#test').inputmask('999[-AAA]'); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />While the field has focus and is blank, users will see the full mask </code>___-___<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. When the required part of the mask is filled and the field loses focus, the user will see </code>123<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. When both the required and optional parts of the mask are filled out and the field loses focus, the user will see </code>123-ABC<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br />#### Optional masks with greedy false <br />When defining an optional mask together with the greedy: false option, the inputmask will show the smallest possible mask as input first. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask({ mask: "9[-9999]", greedy: false }); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />The initial mask shown will be "<strong>_</strong>" instead of "<strong>_</strong>-____". <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Dynamic masks can change during the input. To define a dynamic part use { }. <br /> <br />{n} => n repeats <br />{n|j} => n repeats, with j jitmasking <br />{n,m} => from n to m repeats <br />{n,m|j} => from n to m repeats, with j jitmasking <br /> <br />Also {+} and {<em>} is allowed. + start from 1 and </em> start from 0. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $(selector).inputmask("aa-9{4}"); //static mask with dynamic syntax <br /> $(selector).inputmask("aa-9{1,4}"); //dynamic mask ~ the 9 def can be occur 1 to 4 times <br /> <br /> //email mask <br /> $(selector).inputmask({ <br /> mask: "<em>{1,20}[.</em>{1,20}][.<em>{1,20}][.</em>{1,20}]@<em>{1,20}[.</em>{2,6}][.*{1,2}]", <br /> greedy: false, <br /> onBeforePaste: function (pastedValue, opts) { <br /> pastedValue = pastedValue.toLowerCase(); <br /> return pastedValue.replace("mailto:", ""); <br /> }, <br /> definitions: { <br /> '*': { <br /> validator: "[0-9A-Za-z!#$%&'*+/=?^_</code>{|}~\-]", <br /> casing: "lower" <br /> } <br /> } <br /> }); <br /> //decimal mask <br /> Inputmask("(.999){+|1},00", { <br /> positionCaretOnClick: "radixFocus", <br /> radixPoint: ",", <br /> _radixDance: true, <br /> numericInput: true, <br /> placeholder: "0", <br /> definitions: { <br /> "0": { <br /> validator: "[0-9\uFF11-\uFF19]" <br /> } <br /> } <br /> }).mask(selector); <br />}); <br />``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />The alternator syntax is like an <strong>OR</strong> statement. The mask can be one of the 3 choices specified in the alternator. <br /> <br />To define an alternator use the |. <br />ex: "a|9" => a or 9 <br />"(aaa)|(999)" => aaa or 999 <br />"(aaa|999|9AA)" => aaa or 999 or 9AA <br /> <br />Also make sure to read about the keepStatic option. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("selector").inputmask("(99.9)|(X)", { <br /> definitions: { <br /> "X": { <br /> validator: "[xX]", <br /> casing: "upper" <br /> } <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("selector").inputmask({ <br /> mask: ["99.9", "X"], <br /> definitions: { <br /> "X": { <br /> validator: "[xX]", <br /> casing: "upper" <br /> } <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />You can define the mask as a function which can allow to preprocess the resulting mask. Example sorting for multiple masks or retrieving mask definitions dynamically through ajax. The preprocessing fn should return a valid mask definition. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask({ mask: function () { /<em> do stuff </em>/ return ["[1-]AAA-999", "[1-]999-AAA"]; }}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Just in time masking. With the jitMasking option you can enable jit masking. The mask will only be visible for the user entered characters. <br />Default: false <br /> <br />Value can be true or a threshold number or false. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask("datetime", { jitMasking: true }).mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Define custom definitions</h2> <br />You can define your own definitions to use in your mask.<br>Start by choosing a masksymbol. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Next define your validator. The validator can be a regular expression or a function. <br /> <br />The return value of a validator can be true, false or a command object. <br /> <br />#### Options of the command object <br />- pos : position to insert <br />- c : character to insert <br />- caret : position of the caret <br />- remove : position(s) to remove <br /> - pos or [pos1, pos2] <br /> <br />- insert : position(s) to add : <br /> - { pos : position to insert, c : character to insert, fromIsValid : true/false, strict : true/false } <br /> - [{ pos : position to insert, c : character to insert, fromIsValid : true/false, strict : true/false }, { ...}, ... ] <br /> <br /> fromIsValid & strict <br /> <br />- refreshFromBuffer : <br /> - true => refresh validPositions from the complete buffer <br /> - { start: , end: } => refresh from start to end <br />- rewritePosition: rewrite the maskPos within the isvalid function <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />When you insert or delete characters, they are only shifted when the definition type is the same. This behavior can be overridden by giving a definitionSymbol. (see example x, y, z, which can be used for ip-address masking, the validation is different, but it is allowed to shift the characters between the definitions) <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask.extendDefinitions({ <br /> 'f': { //masksymbol <br /> "validator": "[0-9\(\)\.\+/ ]" <br /> }, <br /> 'g': { <br /> "validator": function (chrs, buffer, pos, strict, opts) { <br /> //do some logic and return true, false, or { "pos": new position, "c": character to place } <br /> } <br /> }, <br /> 'j': { //basic year <br /> validator: "(19|20)\\d{2}" <br /> }, <br /> 'x': { <br /> validator: "[0-2]", <br /> definitionSymbol: "i" //this allows shifting values from other definitions, with the same masksymbol or definitionSymbol <br /> }, <br /> 'y': { <br /> validator: function (chrs, buffer, pos, strict, opts) { <br /> var valExp2 = new RegExp("2[0-5]|[01][0-9]"); <br /> return valExp2.test(buffer[pos - 1] + chrs); <br /> }, <br /> definitionSymbol: "i" <br /> }, <br /> 'z': { <br /> validator: function (chrs, buffer, pos, strict, opts) { <br /> var valExp3 = new RegExp("25[0-5]|2[0-4][0-9]|[01][0-9][0-9]"); <br /> return valExp3.test(buffer[pos - 2] + buffer[pos - 1] + chrs); <br /> }, <br /> definitionSymbol: "i" <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Specify a placeholder for a definition. This can also be a function. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Defaults can be set as below. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask.extendDefaults({ <br /> 'autoUnmask': true <br />}); <br />Inputmask.extendDefinitions({ <br /> 'A': { <br /> validator: "[A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]", <br /> casing: "upper" //auto uppercasing <br /> }, <br /> '+': { <br /> validator: "[0-9A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]", <br /> casing: "upper" <br /> } <br />}); <br />Inputmask.extendAliases({ <br /> 'numeric': { <br /> mask: "r", <br /> greedy: false, <br /> ... <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />But if the property is defined within an alias you need to set it for the alias definition. <br />This is also for default plugin options. If the alias definitions extends on default options, you can only override it at alias level. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask.extendAliases({ <br /> 'numeric': { <br /> autoUnmask: true, <br /> allowPlus: false, <br /> allowMinus: false <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />However, the preferred way to alter properties for an alias is by creating a new alias which inherits from the default alias definition. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask.extendAliases({ <br /> 'myNum': { <br /> alias: "numeric", <br /> placeholder: '', <br /> allowPlus: false, <br /> allowMinus: false <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Once defined, you can call the alias by: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask("myNum").mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />All callbacks are implemented as options. This means that you can set general implementations for the callbacks by setting a default. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask.extendDefaults({ <br /> onKeyValidation: function(key, result){ <br /> if (!result){ <br /> alert('Your input is not valid') <br /> } <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Methods:</h2> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Create a mask for the input. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask({ mask: "99-999-99"}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask({ mask: "99-999-99"}).mask(document.querySelectorAll(selector)); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask("99-999-99").mask(document.querySelectorAll(selector)); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var im = new Inputmask("99-999-99"); <br />im.mask(document.querySelectorAll(selector)); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask("99-999-99").mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Get the </code>unmaskedvalue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask('unmaskedvalue'); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var input = document.getElementById(selector); <br />if (input.inputmask) <br /> input.inputmask.unmaskedvalue() <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />#### Value unmasking <br />Unmask a given value against the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "dd/mm/yyyy"}); //23031973 <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Remove the </code>inputmask<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask('remove'); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var input = document.getElementById(selector); <br />if (input.inputmask) <br /> input.inputmask.remove() <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask.remove(document.getElementById(selector)); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />return the default (empty) mask value <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#test").inputmask("999-AAA"); <br /> var initialValue = $("#test").inputmask("getemptymask"); // initialValue => "___-___" <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Check whether the returned value is masked or not; currently only works reliably when using jquery.val fn to retrieve the value <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> function validateMaskedValue(val){} <br /> function validateValue(val){} <br /> <br /> var val = $("#test").val(); <br /> if ($("#test").inputmask("hasMaskedValue")) <br /> validateMaskedValue(val); <br /> else <br /> validateValue(val); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Verify whether the current value is complete or not. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> if ($(selector).inputmask("isComplete")){ <br /> //do something <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />The metadata of the actual mask provided in the mask definitions can be obtained by calling getmetadata. If only a mask is provided the mask definition will be returned by the getmetadata. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask("getmetadata"); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />The setvalue functionality is to set a value to the inputmask like you would do with jQuery.val, <br />BUT it will trigger the internal event used by the inputmask always, whatever the case. <br />This is particular usefull when cloning an inputmask with jQuery.clone. Cloning an inputmask is not a fully functional clone. <br />On the first event (mouseenter, focus, ...) the inputmask can detect if it where cloned and can reactivate the masking. However when setting the value with jQuery.val there is none of the events triggered in that case. The setvalue functionality does this for you. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />$(selector).inputmask("setvalue", value); <br /> <br />var selector = document.getElementById("selector"); <br />selector.inputmask.setValue(value); <br /> <br />Inputmask.setValue(selector, value); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Get or set an option on an existing inputmask. <br />The option method is intented for adding extra options like callbacks, etc at a later time to the mask. <br /> <br />When extra options are set the mask is automatically reapplied, unless you pas true for the noremask argument. <br /> <br />Set an option <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />document.querySelector("#CellPhone").inputmask.option({ <br /> onBeforePaste: function (pastedValue, opts) { <br /> return phoneNumOnPaste(pastedValue, opts); <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("#CellPhone").inputmask("option", { <br /> onBeforePaste: function (pastedValue, opts) { <br /> return phoneNumOnPaste(pastedValue, opts); <br /> } <br />}) <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Instead of masking an input element it is also possible to use the inputmask for formatting given values. Think of formatting values to show in jqGrid or on other elements then inputs. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var formattedDate = Inputmask.format("2331973", { alias: "datetime", inputFormat: "dd/mm/yyyy"}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Validate a given value against the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />var isValid = Inputmask.isValid("23/03/1973", { alias: "datetime", inputFormat: "dd/mm/yyyy"}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Options:</h2> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Change the mask placeholder. <br />Default: "_" <br /> <br />Instead of "_", you can change the unfilled characters mask as you like, simply by adding the </code>placeholder<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> option.<br> <br />For example, </code>placeholder: " "<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will change the default autofill with empty values <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#date").inputmask("99/99/9999",{ "placeholder": "*" }); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or a multi-char placeholder <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#date").inputmask("99/99/9999",{ "placeholder": "dd/mm/yyyy" }); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Definition of the symbols used to indicate an optional part in the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />optionalmarker: { start: "[", end: "]" } <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Definition of the symbols used to indicate a quantifier in the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />quantifiermarker: { start: "{", end: "}" } <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Definition of the symbols used to indicate a group in the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />groupmarker: { start: "(", end: ")" } <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Definition of the symbols used to indicate an alternator part in the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />alternatormarker: "|" <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Definition of the symbols used to escape a part in the mask. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />escapeChar: "\\" <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />See <a href="#escape-special-mask-chars" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">escape special mask chars</a> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />The mask to use. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />Inputmask({ mask: "9{*}").mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Use a regular expression as a mask <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />Inputmask({ regex: "[0-9]*" }).mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />When using shorthands be aware that you need to double escape or use String.raw with a string literal. <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />Inputmask({ regex: "\\d*" }).mask(selector); <br />~ <br />Inputmask({ regex: String.raw</code>\d*<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> }).mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Execute a function when the mask is completed <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#date").inputmask("99/99/9999",{ "oncomplete": function(){ alert('inputmask complete'); } }); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Execute a function when the mask is incomplete. Executes on blur. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#date").inputmask("99/99/9999",{ "onincomplete": function(){ alert('inputmask incomplete'); } }); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Execute a function when the mask is cleared. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#date").inputmask("99/99/9999",{ "oncleared": function(){ alert('inputmask cleared'); } }); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Mask repeat function. Repeat the mask definition x-times. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#number").inputmask({ "mask": "9", "repeat": 10 }); // ~ mask "9999999999" <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Default: false <br />Toggle to allocate as much possible or the opposite. Non-greedy repeat function. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false }); // ~ mask "9" or mask "99" or ... mask "9999999999" <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />With the non-greedy option set to false, you can specify * as repeat. This makes an endless repeat. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Automatically unmask the value when retrieved.<br>Default: false. <br /> <br /><strong>When setting this option to true the plugin also expects the initial value from the server to be unmasked.</strong> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Remove the mask before submitting the form.<br>Default: false <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Remove the empty mask on blur or when not empty removes the optional trailing part Default: true <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#ssn").inputmask("999-99-9999",{placeholder:" ", clearMaskOnLostFocus: true }); //default <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Toggle to insert or overwrite input.<br>Default: true.<br>This option can be altered by pressing the Insert key. <br /> <br />#### insertModeVisual <br />Show selected caret when insertmode = false. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Clear the incomplete input on blur <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#date").inputmask("99/99/9999",{ "clearIncomplete": true }); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Definitions of aliases. <br /> <br />With an alias you can define a complex mask definition and call it by using an alias name. So this is mainly to simplify the use of your masks. Some aliases found in the extensions are: email, currency, decimal, integer, date, datetime, dd/mm/yyyy, etc. <br /> <br />First you have to create an alias definition. The alias definition can contain options for the mask, custom definitions, the mask to use etc. <br /> <br />When you pass in an alias, the alias is first resolved and then the other options are applied. So you can call an alias and pass another mask to be applied over the alias. This also means that you can write aliases which "inherit" from another alias. <br /> <br />Some examples can be found in jquery.inputmask.xxx.extensions.js <br /> <br />use: <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("#date").inputmask("datetime"); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("#date").inputmask({ alias: "datetime"}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />You can also call an alias and extend it with some more options <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("#date").inputmask("datetime", { "clearIncomplete": true }); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />or <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("#date").inputmask({ alias: "datetime", "clearIncomplete": true }); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />The alias to use. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$("#date").inputmask({ alias: "email"}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Callback to implement autocomplete on certain keys for example <br /> <br />Function arguments: event, buffer, caretPos, opts<br>Function return: <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Executes before masking the initial value to allow preprocessing of the initial value. <br /> <br />Function arguments: initialValue, opts<br>Function return: processedValue <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask({ <br /> alias: 'phonebe', <br /> onBeforeMask: function (value, opts) { <br /> var processedValue = value.replace(/^0/g, ""); <br /> if (processedValue.indexOf("32") > 1 || processedValue.indexOf("32") == -1) { <br /> processedValue = "32" + processedValue; <br /> } <br /> <br /> return processedValue; <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />This callback allows for preprocessing the pasted value before actually handling the value for masking. This can be usefull for stripping away some characters before processing. <br /> <br />Function arguments: pastedValue, opts<br>Function return: processedValue <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask({ <br /> mask: '9999 9999 9999 9999', <br /> placeholder: ' ', <br /> showMaskOnHover: false, <br /> showMaskOnFocus: false, <br /> onBeforePaste: function (pastedValue, opts) { <br /> var processedValue = pastedValue; <br /> <br /> //do something with it <br /> <br /> return processedValue; <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />You can also disable pasting a value by returning false in the onBeforePaste call. <br /> <br />Default: Calls the onBeforeMask <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Executes before writing to the masked element <br /> <br />Use this to do some extra processing of the input. This can be usefull when implementing an alias, ex. decimal alias, autofill the digits when leaving the inputfield. <br /> <br />Function arguments: event, buffer, caretPos, opts<br>Function return: command object (see Define custom definitions) <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Executes after unmasking to allow post-processing of the unmaskedvalue. <br /> <br />Function arguments: maskedValue, unmaskedValue<br>Function return: processedValue <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#number").inputmask("decimal", { onUnMask: function(maskedValue, unmaskedValue) { <br /> //do something with the value <br /> return unmaskedValue; <br /> }}); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Shows the mask when the input gets focus. (default = true) <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#ssn").inputmask("999-99-9999",{ showMaskOnFocus: true }); //default <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />To make sure no mask is visible on focus also set the showMaskOnHover to false. Otherwise hovering with the mouse will set the mask and will stay on focus. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Shows the mask when hovering the mouse. (default = true) <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#ssn").inputmask("999-99-9999",{ showMaskOnHover: true }); //default <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Callback function is executed on every keyvalidation with the key, result as parameter. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#ssn").inputmask("999-99-9999", { <br /> onKeyValidation: function (key, result) { <br /> console.log(key + " - " + result); <br /> } <br /> }); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Numeric input direction. Keeps the caret at the end. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $(selector).inputmask('€ 999.999.999,99', { numericInput: true }); //123456 => € ___.__1.234,56 <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Align the input to the right <br /> <br />By setting the rightAlign you can specify to right align an inputmask. This is only applied in combination op the numericInput option or the dir-attribute. Default is true. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $(selector).inputmask('decimal', { rightAlign: false }); //disables the right alignment of the decimal input <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Make escape behave like undo. (ctrl-Z)<br>Pressing escape reverts the value to the value before focus.<br>Default: true <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Define the radixpoint (decimal separator)<br>Default: "" <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Define the groupseparator<br>Default: "" <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Default: null (~false) Use in combination with the alternator syntax Try to keep the mask static while typing. Decisions to alter the mask will be postponed if possible. <br /> <br />ex. $(selector).inputmask({ mask: ["+55-99-9999-9999", "+55-99-99999-9999", ], keepStatic: true }); <br /> <br />typing 1212345123 => should result in +55-12-1234-5123 type extra 4 => switch to +55-12-12345-1234 <br /> <br /><strong>When the option is not set, it will default to false, except for multiple masks it will default to true!!</strong> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />When enabled the caret position is set after the latest valid position on TAB Default: true <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Allows for tabbing through the different parts of the masked field.<br>Default: false <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Pass custom definitions directly in the options. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> Inputmask({ <br /> mask: "V{13}9{4}", <br /> definitions: { <br /> "V": { <br /> validator: "[A-HJ-NPR-Za-hj-npr-z\\d]", <br /> casing: "upper" <br /> } <br /> }, <br /> clearIncomplete: true, <br /> autoUnmask: true <br /> }).mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />With this call-in (hook) you can override the default implementation of the isComplete function.<br>Args => buffer, opts Return => true|false <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(selector).inputmask({ <br /> regex: "[0-9]*", <br /> isComplete: function(buffer, opts) { <br /> return new RegExp(opts.regex).test(buffer.join('')); <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Hook to postValidate the result from isValid. Usefull for validating the entry as a whole. Args => buffer, pos, c, currentResult, opts, maskset, strict<br>Return => true|false|command object <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Hook to preValidate the input. Useful for validating regardless the definition. Args => buffer, pos, char, isSelection, opts, maskset, caretPos, strict => return true/false/command object <br />When return true, the normal validation kicks in, otherwise it is skipped. <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />The staticDefinitionSymbol option is used to indicate that the static entries in the mask can match a certain definition. Especially usefull with alternators so that static element in the mask can match another alternation. <br /> <br />In the example below we mark the spaces as a possible match for the "i" definition. By doing so the mask can alternate to the second mask even when we typed already "12 3". <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask("(99 99 999999)|(i{+})", { <br /> definitions: { <br /> "i": { <br /> validator: ".", <br /> definitionSymbol: "*" <br /> } <br /> }, <br /> staticDefinitionSymbol: "*" <br />}).mask(selector); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Return nothing when the user hasn't entered anything. <br />Default: true <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Disable value property patching <br />Default: false <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Positioning of the caret on click. <br /> <br />Options: <br /> - none <br /> - lvp (based on the last valid position (default) <br /> - radixFocus (position caret to radixpoint on initial click) <br /> - select (select the whole input) <br /> - ignore (ignore the click and continue the mask) <br /> <br />Default: "lvp" <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Apply casing at the mask-level. <br />Options: null, "upper", "lower" or "title" <br />or callback args => elem, test, pos, validPositions return charValue <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />casing: function(elem, test, pos, validPositions) { <br /> do some processing || upper/lower input property in the validPositions <br /> return elem; //upper/lower element <br />} <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />Default: null <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Default: "verbatim" <br />Specify the inputmode - already in place for when browsers start to support them <br />https://html.spec.whatwg.org/#input-modalities:-the-inputmode-attribute <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Specify to use the data-inputmask attributes or to ignore them. <br /> <br />If you don't use data attributes you can disable the import by specifying importDataAttributes: false. <br /> <br /> <br />Default: true <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />Alter the behavior of the char shifting on entry or deletion. <br /> <br />In some cases shifting the mask entries or deletion should be more restrictive. <br />Ex. date masks. Shifting month to day makes no sense <br /> <br />Default: true <br /> <br />true = shift on the "def" match <br />false = shift on the "nativeDef" match <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">General</h2> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />this can be done with the traditional jquery.val function (all browsers) or JavaScript value property for browsers which implement lookupGetter or getOwnPropertyDescriptor <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#number").val(12345); <br /> <br /> var number = document.getElementById("number"); <br /> number.value = 12345; <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />with the autoUnmaskoption you can change the return of $.fn.val (or value property) to unmaskedvalue or the maskedvalue <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $('#<%= tbDate.ClientID%>').inputmask({ "mask": "99/99/9999", 'autoUnmask' : true}); // value: 23/03/1973 <br /> alert($('#<%= tbDate.ClientID%>').val()); // shows 23031973 (autoUnmask: true) <br /> <br /> var tbDate = document.getElementById("<%= tbDate.ClientID%>"); <br /> alert(tbDate.value); // shows 23031973 (autoUnmask: true) <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br />If you want a mask element to appear as a static element you can escape them by \\ <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#months").inputmask("m \\months"); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br />Extra example see https://github.com/RobinHerbots/Inputmask/issues/2251 <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />You can define within a definition to automatically apply some casing on the entry in an input by giving the casing.<br>Casing can be null, "upper", "lower" or "title". <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />Inputmask.extendDefinitions({ <br /> 'A': { <br /> validator: "[A-Za-z]", <br /> casing: "upper" //auto uppercasing <br /> }, <br /> '+': { <br /> validator: "[A-Za-z\u0410-\u044F\u0401\u04510-9]", <br /> casing: "upper" <br /> } <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br />Include jquery.inputmask.extensions.js for using the A and # definitions. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $("#test").inputmask("999-AAA"); // => 123abc ===> 123-ABC <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Supported markup options</h2> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <br /><input id="test" dir="rtl" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <br /><input id="test" readonly="readonly" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <br /><input id="test" disabled="disabled" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <br /><input id="test" maxlength="4" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />You can also apply an inputmask by using the data-inputmask attribute. In the attribute you specify the options wanted for the inputmask. This gets parsed with $.parseJSON (for the moment), so be sure to use a well-formed json-string without the {}. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <br /><input data-inputmask="'alias': 'datetime'" /> <br /><input data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $(":input").inputmask(); <br />}); <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3> <br />All options can also be passed through data-attributes. <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html <br /><input data-inputmask-mask="9" data-inputmask-repeat="10" data-inputmask-greedy="false" /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript <br />$(document).ready(function(){ <br /> $(":input").inputmask(); <br />}); <br /></code>`` <br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">jQuery.clone</h2> <br />When cloning a inputmask, the inputmask reactivates on the first event (mouseenter, focus, ...) that happens to the input. If you want to set a value on the cloned inputmask and you want to directly reactivate the masking you have to use $(input).inputmask("setvalue", value) <br /> <br />Be sure to pass true in the jQuery.clone fn to clone with data and events and use jQuery as dependencyLib <br />(https://api.jquery.com/clone/) <br /> <br /><h1 class="text-2xl font-bold mt-6 mb-4">Extensions</h1> <br /><h2 class="text-xl font-semibold mt-5 mb-3"><a href="README_date.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">date & datetime extensions</a></h2> <br /><h2 class="text-xl font-semibold mt-5 mb-3"><a href="README_numeric.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">numeric extensions</a></h2> <br /><h2 class="text-xl font-semibold mt-5 mb-3"><a href="README_other.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">other extensions</a></h2> <br /> <br />[npm-url]: https://npmjs.org/package/inputmask <br />[npm-image]: https://img.shields.io/npm/v/inputmask.svg <br />[david-url]: https://david-dm.org/RobinHerbots/inputmask#info=dependencies <br />[david-image]: https://img.shields.io/david/RobinHerbots/inputmask.svg <br />[david-dev-url]: https://david-dm.org/RobinHerbots/inputmask#info=devDependencies <br />[david-dev-image]: https://img.shields.io/david/dev/RobinHerbots/inputmask.svg <br />[input-type-ref]: https://html.spec.whatwg.org/multipage/forms.html#do-not-apply <br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"28:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n29:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.7.1\"}]\n2a:[\"$\",\"$L5\",\"babel-loader\",{\"href\":\"/package/babel-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.6\"}]]}]\n2b:[\"$\",\"$L5\",\"grunt\",{\"href\":\"/package/grunt\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.4\"}]]}]\n2c:[\"$\",\"$L5\",\"grunt-available-tasks\",{\"href\":\"/package/grunt-available-tasks\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-available-tasks\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.6.3\"}]]}]\n2d:[\"$\",\"$L5\",\"grunt-bump\",{\"href\":\"/package/grunt-bump\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-bump\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.8.0\"}]]}]\n2e:[\"$\",\"$L5\",\"grunt-cli\",{\"href\":\"/package/grunt-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 t"])</script><script>self.__next_f.push([1,"ext-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.3.2\"}]]}]\n2f:[\"$\",\"$L5\",\"grunt-contrib-clean\",{\"href\":\"/package/grunt-contrib-clean\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-clean\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.0\"}]]}]\n30:[\"$\",\"$L5\",\"grunt-contrib-copy\",{\"href\":\"/package/grunt-contrib-copy\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-copy\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n31:[\"$\",\"$L5\",\"grunt-eslint\",{\"href\":\"/package/grunt-eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^22.0.0\"}]]}]\n32:[\"$\",\"$L5\",\"grunt-nuget\",{\"href\":\"/package/grunt-nuget\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-nuget\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.3.1\"}]]}]\n33:[\"$\",\"$L5\",\"grunt-release\",{\"href\":\"/package/grunt-release\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 "])</script><script>self.__next_f.push([1,"24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-release\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.14.0\"}]]}]\n34:[\"$\",\"$L5\",\"grunt-webpack\",{\"href\":\"/package/grunt-webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.1.3\"}]]}]\n35:[\"$\",\"$L5\",\"jqlite\",{\"href\":\"/package/jqlite\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jqlite\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.2.42\"}]]}]\n36:[\"$\",\"$L5\",\"jquery\",{\"href\":\"/package/jquery\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jquery\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.4.1\"}]]}]\n37:[\"$\",\"$L5\",\"jsdom\",{\"href\":\"/package/jsdom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jsdom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^15.2.1\"}]]}]\n38:[\"$\",\"$L5\",\"load-grunt-tasks\",{\"href\":\"/package/load-grunt-tasks\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$unde"])</script><script>self.__next_f.push([1,"fined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"load-grunt-tasks\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.1.0\"}]]}]\n39:[\"$\",\"$L5\",\"qunit\",{\"href\":\"/package/qunit\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"qunit\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.9.3\"}]]}]\n3a:[\"$\",\"$L5\",\"uglifyjs-webpack-plugin\",{\"href\":\"/package/uglifyjs-webpack-plugin\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"uglifyjs-webpack-plugin\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.0\"}]]}]\n3b:[\"$\",\"$L5\",\"webpack\",{\"href\":\"/package/webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.41.2\"}]]}]\n3c:[\"$\",\"$L5\",\"webpack-cli\",{\"href\":\"/package/webpack-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.3.10\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>