use-mask-input 1.0.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/example/App.example.d.ts +3 -0
- package/dist/{useMaskInput.test.d.ts → example/index.d.ts} +0 -0
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1 -2
- package/dist/index.modern.js.map +1 -1
- package/dist/useMaskInput.d.ts +3 -3
- package/node_modules/inputmask/README.md +94 -61
- package/node_modules/inputmask/dist/inputmask.es6.js +5 -0
- package/node_modules/inputmask/dist/inputmask.js +2900 -2868
- package/node_modules/inputmask/dist/inputmask.min.js +3 -3
- package/node_modules/inputmask/dist/jquery.inputmask.js +2840 -2807
- package/node_modules/inputmask/dist/jquery.inputmask.min.js +3 -3
- package/node_modules/inputmask/lib/bindings/inputmask.es6.js +5 -0
- package/node_modules/inputmask/lib/canUseDOM.js +7 -0
- package/node_modules/inputmask/lib/defaults.js +36 -2
- package/node_modules/inputmask/lib/definitions.js +1 -1
- package/node_modules/inputmask/lib/dependencyLibs/events.js +19 -9
- package/node_modules/inputmask/lib/environment.js +2 -0
- package/node_modules/inputmask/lib/eventhandlers.js +55 -44
- package/node_modules/inputmask/lib/eventruler.js +10 -9
- package/node_modules/inputmask/lib/extensions/inputmask.date.extensions.js +543 -430
- package/node_modules/inputmask/lib/extensions/inputmask.extensions.js +117 -99
- package/node_modules/inputmask/lib/extensions/inputmask.numeric.extensions.js +590 -574
- package/node_modules/inputmask/lib/global/window.js +2 -1
- package/node_modules/inputmask/lib/inputHandling.js +30 -18
- package/node_modules/inputmask/lib/inputmask.js +9 -2
- package/node_modules/inputmask/lib/inputmaskElement.js +2 -1
- package/node_modules/inputmask/lib/keycode.json +4 -0
- package/node_modules/inputmask/lib/mask-lexer.js +434 -436
- package/node_modules/inputmask/lib/mask.js +4 -4
- package/node_modules/inputmask/lib/masktoken.js +13 -0
- package/node_modules/inputmask/lib/polyfills/Array.includes.js +48 -0
- package/node_modules/inputmask/lib/{getPrototypeOf.js → polyfills/Object.getPrototypeOf.js} +0 -0
- package/node_modules/inputmask/lib/positioning.js +5 -5
- package/node_modules/inputmask/lib/validation-tests.js +108 -46
- package/node_modules/inputmask/lib/validation.js +82 -73
- package/node_modules/inputmask/package.json +41 -69
- package/package.json +40 -38
- package/node_modules/inputmask/CHANGELOG.md +0 -744
- package/node_modules/inputmask/index.js +0 -1
- package/node_modules/inputmask/lib/dependencyLibs/inputmask.dependencyLib.jqlite.js +0 -20
|
File without changes
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ var react = require('react');
|
|
|
4
4
|
var Inputmask = _interopDefault(require('inputmask'));
|
|
5
5
|
|
|
6
6
|
function _extends() {
|
|
7
|
-
_extends = Object.assign
|
|
7
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
8
8
|
for (var i = 1; i < arguments.length; i++) {
|
|
9
9
|
var source = arguments[i];
|
|
10
10
|
|
|
@@ -17,7 +17,6 @@ function _extends() {
|
|
|
17
17
|
|
|
18
18
|
return target;
|
|
19
19
|
};
|
|
20
|
-
|
|
21
20
|
return _extends.apply(this, arguments);
|
|
22
21
|
}
|
|
23
22
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EACnB,IAAQC,IAAR,GAAoCD,KAApC,CAAQC,IAAR;MAAcC,QAAd,GAAoCF,KAApC,CAAcE,QAAd;MAAwBC,OAAxB,GAAoCH,KAApC,CAAwBG,OAAxB;EAEA,IAAMC,GAAG,GAAGC,YAAM,CAAmB,IAAnB,CAAlB;EAEAC,eAAS,CAAC;IACR,IAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;MAChB;;;IAGF,IAAMC,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;IAKAK,SAAS,CAACP,IAAV,CAAeG,GAAG,CAACG,OAAnB;;IAEA,IAAIL,QAAQ,IAAIE,GAAG,CAACG,OAApB,EAA6B;MAC3BL,QAAQ,CAACE,GAAG,CAACG,OAAL,CAAR;;GAbK,EAeN,CAACN,IAAD,EAAOC,QAAP,EAAiBC,OAAjB,CAfM,CAAT;EAiBA,OAAOC,GAAP;AACD,CAvBD;;;;"}
|
package/dist/index.modern.js
CHANGED
|
@@ -2,7 +2,7 @@ import { useRef, useEffect } from 'react';
|
|
|
2
2
|
import Inputmask from 'inputmask';
|
|
3
3
|
|
|
4
4
|
function _extends() {
|
|
5
|
-
_extends = Object.assign
|
|
5
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
6
6
|
for (var i = 1; i < arguments.length; i++) {
|
|
7
7
|
var source = arguments[i];
|
|
8
8
|
|
|
@@ -15,7 +15,6 @@ function _extends() {
|
|
|
15
15
|
|
|
16
16
|
return target;
|
|
17
17
|
};
|
|
18
|
-
|
|
19
18
|
return _extends.apply(this, arguments);
|
|
20
19
|
}
|
|
21
20
|
|
package/dist/index.modern.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.js","sources":["../src/useMaskInput.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask
|
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/useMaskInput.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n"],"names":["useInputMask","props","mask","register","options","ref","useRef","useEffect","current","maskInput","Inputmask"],"mappings":";;;;;;;;;;;;;;;;;;;;AASA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD;EACnB,IAAQC,IAAR,GAAoCD,KAApC,CAAQC,IAAR;MAAcC,QAAd,GAAoCF,KAApC,CAAcE,QAAd;MAAwBC,OAAxB,GAAoCH,KAApC,CAAwBG,OAAxB;EAEA,IAAMC,GAAG,GAAGC,MAAM,CAAmB,IAAnB,CAAlB;EAEAC,SAAS,CAAC;IACR,IAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;MAChB;;;IAGF,IAAMC,SAAS,GAAGC,SAAS;MACzBR,IAAI,EAAJA;OACGE,OAFsB,EAA3B;IAKAK,SAAS,CAACP,IAAV,CAAeG,GAAG,CAACG,OAAnB;;IAEA,IAAIL,QAAQ,IAAIE,GAAG,CAACG,OAApB,EAA6B;MAC3BL,QAAQ,CAACE,GAAG,CAACG,OAAL,CAAR;;GAbK,EAeN,CAACN,IAAD,EAAOC,QAAP,EAAiBC,OAAjB,CAfM,CAAT;EAiBA,OAAOC,GAAP;AACD,CAvBD;;;;"}
|
package/dist/useMaskInput.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import
|
|
2
|
+
import Inputmask from 'inputmask';
|
|
3
3
|
interface UseInputMaskOptions {
|
|
4
|
-
mask: Options['mask'];
|
|
4
|
+
mask: Inputmask.Options['mask'];
|
|
5
5
|
register?(element: HTMLElement): void;
|
|
6
|
-
options?: Options;
|
|
6
|
+
options?: Inputmask.Options;
|
|
7
7
|
}
|
|
8
8
|
declare const useInputMask: (props: UseInputMaskOptions) => import("react").RefObject<HTMLInputElement>;
|
|
9
9
|
export default useInputMask;
|
|
@@ -1,25 +1,28 @@
|
|
|
1
1
|
# Inputmask
|
|
2
2
|
|
|
3
|
-
Copyright (c) 2010 -
|
|
3
|
+
Copyright (c) 2010 - 2021 Robin Herbots Licensed under the MIT license (<https://opensource.org/licenses/MIT>)
|
|
4
|
+
|
|
5
|
+
The Inputmask has a very permissive license and this will stay that way. But when you use the Inputmask in a commercial setting, be so honest to make a small donation.
|
|
6
|
+
This will be appreciated very much.
|
|
4
7
|
|
|
5
8
|
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=ZNR3EB6JTMMSS)
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
  
|
|
8
11
|
|
|
9
|
-
Inputmask is a javascript library
|
|
12
|
+
Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite.
|
|
10
13
|
|
|
11
14
|
An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
|
|
12
15
|
|
|
13
16
|
Highlights:
|
|
14
17
|
- easy to use
|
|
15
|
-
- optional parts
|
|
16
|
-
- possibility to define aliases which hide complexity
|
|
17
|
-
- date /
|
|
18
|
+
- optional parts anywhere in the mask
|
|
19
|
+
- possibility to define aliases which hide the complexity
|
|
20
|
+
- date / DateTime masks
|
|
18
21
|
- numeric masks
|
|
19
22
|
- lots of callbacks
|
|
20
23
|
- non-greedy masks
|
|
21
24
|
- many features can be enabled/disabled/configured by options
|
|
22
|
-
- supports
|
|
25
|
+
- supports read-only/disabled/dir="rtl" attributes
|
|
23
26
|
- support data-inputmask attribute(s)
|
|
24
27
|
- alternator-mask
|
|
25
28
|
- regex-mask
|
|
@@ -29,9 +32,9 @@ Highlights:
|
|
|
29
32
|
- value formatting / validating without input element
|
|
30
33
|
- AMD/CommonJS support
|
|
31
34
|
- dependencyLibs: vanilla javascript, jQuery, jqlite
|
|
32
|
-
- \<input-mask\>
|
|
35
|
+
- \<input-mask\> htmlelement
|
|
33
36
|
|
|
34
|
-
Demo page see
|
|
37
|
+
Demo page see <https://robinherbots.github.io/Inputmask/>
|
|
35
38
|
|
|
36
39
|
Thanks to [Jetbrains](https://www.jetbrains.com/?from=inputmask) for providing a free license for their excellent Webstorm IDE.
|
|
37
40
|
<a href="https://www.jetbrains.com/?from=inputmask">
|
|
@@ -50,8 +53,6 @@ Inputmask can run against different javascript libraries.
|
|
|
50
53
|
You can choose between:
|
|
51
54
|
- inputmask.dependencyLib (vanilla)
|
|
52
55
|
- inputmask.dependencyLib.jquery
|
|
53
|
-
- inputmask.dependencyLib.jqlite
|
|
54
|
-
- .... (others are welcome)
|
|
55
56
|
|
|
56
57
|
### Classic web with <script\> tag
|
|
57
58
|
Include the js-files which you can find in the `dist` folder.
|
|
@@ -94,6 +95,11 @@ var Inputmask = require('inputmask');
|
|
|
94
95
|
import Inputmask from "inputmask";
|
|
95
96
|
```
|
|
96
97
|
|
|
98
|
+
### ES6
|
|
99
|
+
```
|
|
100
|
+
import Inputmask from "inputmask.es6.js";
|
|
101
|
+
```
|
|
102
|
+
|
|
97
103
|
## Usage
|
|
98
104
|
### via Inputmask class
|
|
99
105
|
|
|
@@ -105,7 +111,7 @@ im.mask(selector);
|
|
|
105
111
|
|
|
106
112
|
//or
|
|
107
113
|
|
|
108
|
-
Inputmask({"mask": "(999) 999-9999",
|
|
114
|
+
Inputmask({"mask": "(999) 999-9999", ... other_options, ...}).mask(selector);
|
|
109
115
|
Inputmask("9-a{1,3}9{1,3}").mask(selector);
|
|
110
116
|
Inputmask("9", { repeat: 10 }).mask(selector);
|
|
111
117
|
|
|
@@ -154,7 +160,7 @@ $(document).ready(function(){
|
|
|
154
160
|
```
|
|
155
161
|
|
|
156
162
|
### via \<input-mask\> element
|
|
157
|
-
Use the input-mask element in your
|
|
163
|
+
Use the input-mask element in your HTML code and set the options as attributes.
|
|
158
164
|
|
|
159
165
|
```html
|
|
160
166
|
<input-mask alias="currency"></input-mask>
|
|
@@ -181,13 +187,13 @@ The allowed input types are defined in the supportsInputType option. Also see ([
|
|
|
181
187
|
There are more definitions defined within the extensions.<br>You can find info within the js-files or by further exploring the options.
|
|
182
188
|
|
|
183
189
|
###### Note:
|
|
184
|
-
When your
|
|
190
|
+
When your new mask is acting strange and replaces some static chars with the mask, then there is a definition that uses the char as a symbol.
|
|
185
191
|
To solve this you need to [double escape the char](#escape-special-mask-chars).
|
|
186
192
|
|
|
187
193
|
|
|
188
194
|
## Masking types
|
|
189
195
|
### Static masks
|
|
190
|
-
These are the very
|
|
196
|
+
These are the very basics of masking. The mask is defined and will not change during the input.
|
|
191
197
|
|
|
192
198
|
```javascript
|
|
193
199
|
$(document).ready(function(){
|
|
@@ -205,14 +211,14 @@ Example:
|
|
|
205
211
|
$('#test').inputmask('(99) 9999[9]-9999');
|
|
206
212
|
```
|
|
207
213
|
|
|
208
|
-
This mask
|
|
214
|
+
This mask will allow input like `(99) 99999-9999` or `(99) 9999-9999`.
|
|
209
215
|
|
|
210
216
|
Input => 12123451234 mask => (12) 12345-1234 (trigger complete)<br>
|
|
211
217
|
Input => 121234-1234 mask => (12) 1234-1234 (trigger complete)<br>
|
|
212
218
|
Input => 1212341234 mask => (12) 12341-234_ (trigger incomplete)
|
|
213
219
|
|
|
214
220
|
#### skipOptionalPartCharacter
|
|
215
|
-
As an extra there is another configurable character which is used to skip an optional part in the mask.
|
|
221
|
+
As an extra, there is another configurable character which is used to skip an optional part in the mask.
|
|
216
222
|
|
|
217
223
|
```javascript
|
|
218
224
|
skipOptionalPartCharacter: " "
|
|
@@ -220,7 +226,7 @@ skipOptionalPartCharacter: " "
|
|
|
220
226
|
|
|
221
227
|
Input => 121234 1234 mask => (12) 1234-1234 (trigger complete)
|
|
222
228
|
|
|
223
|
-
When `clearMaskOnLostFocus: true` 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.
|
|
229
|
+
When `clearMaskOnLostFocus: true` 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.
|
|
224
230
|
|
|
225
231
|
For example, given:
|
|
226
232
|
|
|
@@ -240,7 +246,7 @@ $(selector).inputmask({ mask: "9[-9999]", greedy: false });
|
|
|
240
246
|
The initial mask shown will be "**_**" instead of "**_**-____".
|
|
241
247
|
|
|
242
248
|
### Dynamic masks
|
|
243
|
-
Dynamic masks can change during
|
|
249
|
+
Dynamic masks can change during input. To define a dynamic part use { }.
|
|
244
250
|
|
|
245
251
|
{n} => n repeats
|
|
246
252
|
{n|j} => n repeats, with j jitmasking
|
|
@@ -291,7 +297,8 @@ The alternator syntax is like an **OR** statement. The mask can be one of the 3
|
|
|
291
297
|
To define an alternator use the |.
|
|
292
298
|
ex: "a|9" => a or 9
|
|
293
299
|
"(aaa)|(999)" => aaa or 999
|
|
294
|
-
"(aaa|999|9AA)" => aaa or 999 or 9AA
|
|
300
|
+
"(aaa|999|9AA)" => aaa or 999 or 9AA
|
|
301
|
+
"aaaa|9999" => aaa a or 9 999
|
|
295
302
|
|
|
296
303
|
**Also make sure to read about the [keepStatic](#keepStatic) option.**
|
|
297
304
|
|
|
@@ -321,14 +328,14 @@ $("selector").inputmask({
|
|
|
321
328
|
```
|
|
322
329
|
|
|
323
330
|
### Preprocessing masks
|
|
324
|
-
You can define the mask as a function
|
|
331
|
+
You can define the mask as a function that can allow you 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.
|
|
325
332
|
|
|
326
333
|
```javascript
|
|
327
334
|
$(selector).inputmask({ mask: function () { /* do stuff */ return ["[1-]AAA-999", "[1-]999-AAA"]; }});
|
|
328
335
|
```
|
|
329
336
|
|
|
330
337
|
### JIT Masking
|
|
331
|
-
Just in time masking. With the jitMasking option you can enable jit masking. The mask will only be visible for the user
|
|
338
|
+
Just in time masking. With the jitMasking option, you can enable jit masking. The mask will only be visible for the user-entered characters.
|
|
332
339
|
Default: false
|
|
333
340
|
|
|
334
341
|
Value can be true or a threshold number or false.
|
|
@@ -341,9 +348,9 @@ Inputmask("datetime", { jitMasking: true }).mask(selector);
|
|
|
341
348
|
You can define your own definitions to use in your mask.<br>Start by choosing a masksymbol.
|
|
342
349
|
|
|
343
350
|
### validator(chrs, maskset, pos, strict, opts)
|
|
344
|
-
Next define your validator. The validator can be a regular expression or a function.
|
|
351
|
+
Next, define your validator. The validator can be a regular expression or a function.
|
|
345
352
|
|
|
346
|
-
The return value of a validator can be true, false or a command object.
|
|
353
|
+
The return value of a validator can be true, false, or a command object.
|
|
347
354
|
|
|
348
355
|
#### Options of the command object
|
|
349
356
|
- pos : position to insert
|
|
@@ -356,7 +363,7 @@ The return value of a validator can be true, false or a command object.
|
|
|
356
363
|
- { pos : position to insert, c : character to insert, fromIsValid : true/false, strict : true/false }
|
|
357
364
|
- [{ pos : position to insert, c : character to insert, fromIsValid : true/false, strict : true/false }, { ...}, ... ]
|
|
358
365
|
|
|
359
|
-
fromIsValid & strict
|
|
366
|
+
fromIsValid & strict defaults to true.
|
|
360
367
|
|
|
361
368
|
- refreshFromBuffer :
|
|
362
369
|
- true => refresh validPositions from the complete buffer
|
|
@@ -365,7 +372,7 @@ The return value of a validator can be true, false or a command object.
|
|
|
365
372
|
See [preValidation option](#preValidation)
|
|
366
373
|
|
|
367
374
|
### definitionSymbol
|
|
368
|
-
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
|
|
375
|
+
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)
|
|
369
376
|
|
|
370
377
|
```javascript
|
|
371
378
|
Inputmask.extendDefinitions({
|
|
@@ -404,8 +411,21 @@ Inputmask.extendDefinitions({
|
|
|
404
411
|
### placeholder
|
|
405
412
|
Specify a placeholder for a definition. This can also be a function.
|
|
406
413
|
|
|
407
|
-
###
|
|
408
|
-
|
|
414
|
+
### optional
|
|
415
|
+
Mark the definition as optional
|
|
416
|
+
|
|
417
|
+
### static
|
|
418
|
+
Mark the definition as static
|
|
419
|
+
|
|
420
|
+
### casing (definition option)
|
|
421
|
+
Specify casing options.
|
|
422
|
+
The options are the same as the [Casing option](#casing)
|
|
423
|
+
|
|
424
|
+
### generated
|
|
425
|
+
Mark the definition as generated
|
|
426
|
+
|
|
427
|
+
## set defaults
|
|
428
|
+
The defaults can be set as below.
|
|
409
429
|
|
|
410
430
|
```javascript
|
|
411
431
|
Inputmask.extendDefaults({
|
|
@@ -431,7 +451,7 @@ Inputmask.extendAliases({
|
|
|
431
451
|
```
|
|
432
452
|
|
|
433
453
|
But if the property is defined within an alias you need to set it for the alias definition.
|
|
434
|
-
This is also for default plugin options. If the alias definitions
|
|
454
|
+
This is also for default plugin options. If the alias definitions extend on default options, you can only override it at alias level.
|
|
435
455
|
|
|
436
456
|
```javascript
|
|
437
457
|
Inputmask.extendAliases({
|
|
@@ -443,7 +463,7 @@ Inputmask.extendAliases({
|
|
|
443
463
|
});
|
|
444
464
|
```
|
|
445
465
|
|
|
446
|
-
However, the preferred way to alter properties for an alias is by creating a new alias
|
|
466
|
+
However, the preferred way to alter properties for an alias is by creating a new alias that inherits from the default alias definition.
|
|
447
467
|
|
|
448
468
|
```javascript
|
|
449
469
|
Inputmask.extendAliases({
|
|
@@ -527,7 +547,8 @@ if (input.inputmask)
|
|
|
527
547
|
Unmask a given value against the mask.
|
|
528
548
|
|
|
529
549
|
```javascript
|
|
530
|
-
var
|
|
550
|
+
var unformattedMask = Inputmask.unmask("123-45678-90", { mask: "999-99999-99" }); //1234567890
|
|
551
|
+
var unformattedDate = Inputmask.unmask("23/03/1973", { alias: "datetime", inputFormat: "dd/mm/yyyy", outputFormat: "ddmmyyyy"});//23031973
|
|
531
552
|
```
|
|
532
553
|
|
|
533
554
|
### remove
|
|
@@ -599,7 +620,7 @@ $(selector).inputmask("getmetadata");
|
|
|
599
620
|
The setvalue functionality is to set a value to the inputmask like you would do with jQuery.val,
|
|
600
621
|
BUT it will trigger the internal event used by the inputmask always, whatever the case.
|
|
601
622
|
This is particular usefull when cloning an inputmask with jQuery.clone. Cloning an inputmask is not a fully functional clone.
|
|
602
|
-
On the first event (mouseenter, focus, ...) the inputmask can detect if it
|
|
623
|
+
On the first event (mouseenter, focus, ...) the inputmask can detect if it were 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.
|
|
603
624
|
|
|
604
625
|
```
|
|
605
626
|
$(selector).inputmask("setvalue", value);
|
|
@@ -635,7 +656,7 @@ $("#CellPhone").inputmask("option", {
|
|
|
635
656
|
```
|
|
636
657
|
|
|
637
658
|
### format
|
|
638
|
-
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.
|
|
659
|
+
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.
|
|
639
660
|
|
|
640
661
|
```javascript
|
|
641
662
|
var formattedDate = Inputmask.format("2331973", { alias: "datetime", inputFormat: "dd/mm/yyyy"});
|
|
@@ -785,7 +806,7 @@ Automatically unmask the value when retrieved.<br>Default: false.
|
|
|
785
806
|
Remove the mask before submitting the form.<br>Default: false
|
|
786
807
|
|
|
787
808
|
### clearMaskOnLostFocus
|
|
788
|
-
Remove the empty mask on blur or when not empty
|
|
809
|
+
Remove the empty mask on blur or when not empty remove the optional trailing part Default: true
|
|
789
810
|
|
|
790
811
|
```javascript
|
|
791
812
|
$(document).ready(function(){
|
|
@@ -811,11 +832,11 @@ $(document).ready(function(){
|
|
|
811
832
|
### aliases
|
|
812
833
|
Definitions of aliases.
|
|
813
834
|
|
|
814
|
-
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
|
|
835
|
+
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.
|
|
815
836
|
|
|
816
|
-
First you have to create an alias definition. The alias definition can contain options for the mask, custom definitions, the mask to use etc.
|
|
837
|
+
First, you have to create an alias definition. The alias definition can contain options for the mask, custom definitions, the mask to use, etc.
|
|
817
838
|
|
|
818
|
-
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
|
|
839
|
+
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 that "inherit" from another alias.
|
|
819
840
|
|
|
820
841
|
Some examples can be found in jquery.inputmask.xxx.extensions.js
|
|
821
842
|
|
|
@@ -875,7 +896,7 @@ $(selector).inputmask({
|
|
|
875
896
|
```
|
|
876
897
|
|
|
877
898
|
### onBeforePaste
|
|
878
|
-
This callback allows for preprocessing the pasted value before actually handling the value for masking. This can be
|
|
899
|
+
This callback allows for preprocessing the pasted value before actually handling the value for masking. This can be useful for stripping away some characters before processing.
|
|
879
900
|
|
|
880
901
|
Function arguments: pastedValue, opts<br>Function return: processedValue
|
|
881
902
|
|
|
@@ -902,9 +923,9 @@ Default: Calls the onBeforeMask
|
|
|
902
923
|
### onBeforeWrite
|
|
903
924
|
Executes before writing to the masked element
|
|
904
925
|
|
|
905
|
-
Use this to do some extra processing of the input. This can be
|
|
926
|
+
Use this to do some extra processing of the input. This can be useful when implementing an alias, ex. decimal alias, autofill the digits when leaving the inputfield.
|
|
906
927
|
|
|
907
|
-
Function arguments: event, buffer, caretPos, opts<br>Function return: command object (see Define custom definitions)
|
|
928
|
+
Function arguments: event, buffer, caretPos, opts<br>Function return: command object (see [Define custom definitions](#define-custom-definitions))
|
|
908
929
|
|
|
909
930
|
### onUnMask
|
|
910
931
|
Executes after unmasking to allow post-processing of the unmaskedvalue.
|
|
@@ -941,7 +962,7 @@ $(document).ready(function(){
|
|
|
941
962
|
```
|
|
942
963
|
|
|
943
964
|
### onKeyValidation
|
|
944
|
-
Callback function is executed on every keyvalidation with the key, result as parameter.
|
|
965
|
+
Callback function is executed on every keyvalidation with the key, result as the parameter.
|
|
945
966
|
|
|
946
967
|
```javascript
|
|
947
968
|
$(document).ready(function(){
|
|
@@ -967,7 +988,7 @@ $(document).ready(function(){
|
|
|
967
988
|
### rightAlign
|
|
968
989
|
Align the input to the right
|
|
969
990
|
|
|
970
|
-
By setting the rightAlign you can specify to right
|
|
991
|
+
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. The default is true.
|
|
971
992
|
|
|
972
993
|
```javascript
|
|
973
994
|
$(document).ready(function(){
|
|
@@ -991,7 +1012,11 @@ ex. $(selector).inputmask({ mask: ["+55-99-9999-9999", "+55-99-99999-9999", ], k
|
|
|
991
1012
|
|
|
992
1013
|
typing 1212345123 => should result in +55-12-1234-5123 type extra 4 => switch to +55-12-12345-1234
|
|
993
1014
|
|
|
994
|
-
**When the option is not set, it will default to false
|
|
1015
|
+
**When the option is not set, it will default to false.**
|
|
1016
|
+
**Except:**
|
|
1017
|
+
- for multiple masks it will default to true
|
|
1018
|
+
- when the first alternation is shorter then the next it will also default to true.
|
|
1019
|
+
- ex: (9|999), (99)|(aaaa)
|
|
995
1020
|
|
|
996
1021
|
### positionCaretOnTab
|
|
997
1022
|
When enabled the caret position is set after the latest valid position on TAB Default: true
|
|
@@ -1032,16 +1057,16 @@ $(selector).inputmask({
|
|
|
1032
1057
|
Hook to postValidate the result from isValid. Usefull for validating the entry as a whole. Args => buffer, pos, c, currentResult, opts, maskset, strict, fromCheckval<br>Return => true|false|command object
|
|
1033
1058
|
|
|
1034
1059
|
### preValidation
|
|
1035
|
-
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
|
|
1036
|
-
When
|
|
1060
|
+
Hook to preValidate the input. Useful for validating regardless of the definition. Args => buffer, pos, char, isSelection, opts, maskset, caretPos, strict => return true/false/command object
|
|
1061
|
+
When returning true, the normal validation kicks in, otherwise, it is skipped.
|
|
1037
1062
|
|
|
1038
|
-
When returning a command object the actions are executed and
|
|
1063
|
+
When returning a command object the actions are executed and further validation is stopped.
|
|
1039
1064
|
If you want to continue further validation, you need to add the rewritePosition action.
|
|
1040
1065
|
|
|
1041
1066
|
### staticDefinitionSymbol
|
|
1042
|
-
The staticDefinitionSymbol option is used to indicate that the static entries in the mask can match a certain definition. Especially
|
|
1067
|
+
The staticDefinitionSymbol option is used to indicate that the static entries in the mask can match a certain definition. Especially useful with alternators so that the static element in the mask can match another alternation.
|
|
1043
1068
|
|
|
1044
|
-
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".
|
|
1069
|
+
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".
|
|
1045
1070
|
|
|
1046
1071
|
```javascript
|
|
1047
1072
|
Inputmask("(99 99 999999)|(i{+})", {
|
|
@@ -1089,9 +1114,10 @@ casing: function(elem, test, pos, validPositions) {
|
|
|
1089
1114
|
Default: null
|
|
1090
1115
|
|
|
1091
1116
|
### inputmode
|
|
1092
|
-
Default: "
|
|
1093
|
-
|
|
1094
|
-
|
|
1117
|
+
Default: "text"
|
|
1118
|
+
The inputmode hints at the type of data that might be entered by the user while editing the element or its contents.
|
|
1119
|
+
|
|
1120
|
+
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
|
|
1095
1121
|
|
|
1096
1122
|
### importDataAttributes
|
|
1097
1123
|
Specify to use the data-inputmask attributes or to ignore them.
|
|
@@ -1117,8 +1143,22 @@ Use the default defined definitions from the prototype.
|
|
|
1117
1143
|
|
|
1118
1144
|
Default: true
|
|
1119
1145
|
|
|
1146
|
+
### validationEventTimeOut
|
|
1147
|
+
Time to show html5 validation error on form submit.
|
|
1148
|
+
|
|
1149
|
+
Default: 3000
|
|
1150
|
+
|
|
1151
|
+
### substitutes
|
|
1152
|
+
Define character substitutes.
|
|
1153
|
+
```
|
|
1154
|
+
substitutes: {
|
|
1155
|
+
",": "."
|
|
1156
|
+
}
|
|
1157
|
+
```
|
|
1158
|
+
Default: {}
|
|
1159
|
+
|
|
1120
1160
|
## General
|
|
1121
|
-
### set a value and apply mask
|
|
1161
|
+
### set a value and apply the mask
|
|
1122
1162
|
this can be done with the traditional jquery.val function (all browsers) or JavaScript value property for browsers which implement lookupGetter or getOwnPropertyDescriptor
|
|
1123
1163
|
|
|
1124
1164
|
```javascript
|
|
@@ -1154,7 +1194,7 @@ $(document).ready(function(){
|
|
|
1154
1194
|
Extra example see https://github.com/RobinHerbots/Inputmask/issues/2251
|
|
1155
1195
|
|
|
1156
1196
|
### auto-casing inputmask
|
|
1157
|
-
You can define within a definition to automatically apply some casing on the entry in
|
|
1197
|
+
You can define within a definition to automatically apply some casing on the entry in input by giving the casing.<br>Casing can be null, "upper", "lower" or "title".
|
|
1158
1198
|
|
|
1159
1199
|
```javascript
|
|
1160
1200
|
Inputmask.extendDefinitions({
|
|
@@ -1203,7 +1243,7 @@ $(document).ready(function(){
|
|
|
1203
1243
|
```
|
|
1204
1244
|
|
|
1205
1245
|
### data-inputmask attribute
|
|
1206
|
-
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
|
|
1246
|
+
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 {}.
|
|
1207
1247
|
|
|
1208
1248
|
```html
|
|
1209
1249
|
<input data-inputmask="'alias': 'datetime'" />
|
|
@@ -1236,11 +1276,4 @@ Be sure to pass true in the jQuery.clone fn to clone with data and events and us
|
|
|
1236
1276
|
(https://api.jquery.com/clone/)
|
|
1237
1277
|
|
|
1238
1278
|
|
|
1239
|
-
|
|
1240
|
-
[npm-url]: https://npmjs.org/package/inputmask
|
|
1241
|
-
[npm-image]: https://img.shields.io/npm/v/inputmask.svg
|
|
1242
|
-
[david-url]: https://david-dm.org/RobinHerbots/inputmask#info=dependencies
|
|
1243
|
-
[david-image]: https://img.shields.io/david/RobinHerbots/inputmask.svg
|
|
1244
|
-
[david-dev-url]: https://david-dm.org/RobinHerbots/inputmask#info=devDependencies
|
|
1245
|
-
[david-dev-image]: https://img.shields.io/david/dev/RobinHerbots/inputmask.svg
|
|
1246
1279
|
[input-type-ref]: https://html.spec.whatwg.org/multipage/forms.html#do-not-apply
|