Skip to content

Commit 20e7034

Browse files
niksmrniksmr
committed
Mask as object feature added
Prevent useless initMask calls
1 parent af38d15 commit 20e7034

File tree

7 files changed

+80
-51
lines changed

7 files changed

+80
-51
lines changed

‎README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,45 @@ The following format characters define editable parts of the mask (see [inputmas
2323
* `#` - alphanumeric, forced to upper case when entered
2424
* `+` - any character
2525

26+
### Static characters
2627
If you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:
2728
```vue
2829
<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder="Phone number" type="tel" />
2930
```
3031

32+
### Raw input
3133
You can also get a raw user input text if you want. Instead of using v-model you might need second argument of the input event:
3234
```vue
3335
<masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
3436
```
3537

38+
### Placeholder character
3639
Placeholder character is customizable by `placeholder-char` attribute:
3740
```vue
3841
<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder-char="-" placeholder="Phone number" type="tel" />
3942
```
4043

44+
### Custom mask object
45+
You can use your own mask options object, it will be passed to the [inputmask-core](https://github.com/insin/inputmask-core#inputmask-options) constructor:
46+
```vue
47+
<masked-input
48+
v-model="custom"
49+
placeholder="Custom"
50+
:mask="{
51+
pattern: 'VVVV',
52+
formatCharacters: {
53+
'V': {
54+
validate: char => /[a-jA-J]/.test(char),
55+
transform: char => char.toUpperCase(),
56+
},
57+
},
58+
}"
59+
/>
60+
```
61+
4162
## Known issues/TODO
4263
* Cut in mobile Chrome
4364
* Cyrillic chars are not supported in mobile Chrome
65+
* Backspace problems in mobile Chrome
4466

4567
Found more? It's open for feedback and pull requests

‎dist/demo.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/demo.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/maskedInput.js

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,9 @@ export default {
4444
type: String
4545
},
4646
mask: {
47-
type: String,
4847
required: true,
4948
validator: function validator(value) {
50-
return !!(value && value.length >= 1);
49+
return !!(value && value.length >= 1 || value instanceof Object);
5150
}
5251
},
5352
placeholderChar: {
@@ -64,8 +63,10 @@ export default {
6463
},
6564

6665
watch: {
67-
mask: function mask() {
68-
this.initMask();
66+
mask: function mask(newValue, oldValue) {
67+
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
68+
this.initMask();
69+
}
6970
},
7071
value: function value(newValue) {
7172
if (this.maskCore) this.maskCore.setValue(newValue); // For multiple inputs support
@@ -82,49 +83,53 @@ export default {
8283
var _this = this;
8384

8485
try {
85-
this.maskCore = new InputMask({
86-
pattern: this.mask,
87-
value: '',
88-
placeholderChar: this.placeholderChar,
89-
/* eslint-disable quote-props */
90-
formatCharacters: {
91-
'a': {
92-
validate: function validate(char) {
93-
return (/^[A-Za-zА-Яа-я]$/.test(char)
94-
);
95-
}
96-
},
97-
'A': {
98-
validate: function validate(char) {
99-
return (/^[A-Za-zА-Яа-я]$/.test(char)
100-
);
86+
if (this.mask instanceof Object) {
87+
this.maskCore = new InputMask(this.mask);
88+
} else {
89+
this.maskCore = new InputMask({
90+
pattern: this.mask,
91+
value: '',
92+
placeholderChar: this.placeholderChar,
93+
/* eslint-disable quote-props */
94+
formatCharacters: {
95+
'a': {
96+
validate: function validate(char) {
97+
return (/^[A-Za-zА-Яа-я]$/.test(char)
98+
);
99+
}
101100
},
102-
transform: function transform(char) {
103-
return char.toUpperCase();
104-
}
105-
},
106-
'*': {
107-
validate: function validate(char) {
108-
return (/^[\dA-Za-zА-Яа-я]$/.test(char)
109-
);
110-
}
111-
},
112-
'#': {
113-
validate: function validate(char) {
114-
return (/^[\dA-Za-zА-Яа-я]$/.test(char)
115-
);
101+
'A': {
102+
validate: function validate(char) {
103+
return (/^[A-Za-zА-Яа-я]$/.test(char)
104+
);
105+
},
106+
transform: function transform(char) {
107+
return char.toUpperCase();
108+
}
116109
},
117-
transform: function transform(char) {
118-
return char.toUpperCase();
119-
}
120-
},
121-
'+': {
122-
validate: function validate() {
123-
return true;
110+
'*': {
111+
validate: function validate(char) {
112+
return (/^[\dA-Za-zА-Яа-я]$/.test(char)
113+
);
114+
}
115+
},
116+
'#': {
117+
validate: function validate(char) {
118+
return (/^[\dA-Za-zА-Яа-я]$/.test(char)
119+
);
120+
},
121+
transform: function transform(char) {
122+
return char.toUpperCase();
123+
}
124+
},
125+
'+': {
126+
validate: function validate() {
127+
return true;
128+
}
124129
}
125130
}
126-
}
127-
});
131+
});
132+
}
128133
[].concat(_toConsumableArray(this.$refs.input.value)).reduce(function (memo, item) {
129134
return _this.maskCore.input(item);
130135
}, null);

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-masked-input",
33
"description": "Masked input component for Vue.js 2.X",
4-
"version": "0.5.1",
4+
"version": "0.5.2",
55
"author": "niksmr",
66
"license": "MIT",
77
"homepage": "https://github.com/niksmr/vue-masked-input",

‎src/App.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
</ul>
1818

1919
<h4>Date: </h4>
20-
<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"/><span>{{ date }}</span>
20+
<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /><span>{{ date }}</span>
2121
<p class="code">
2222
&lt;masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /&gt;
2323
</p>

‎src/MaskedInput.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default {
4040
},
4141
mask: {
4242
required: true,
43-
validator: value => !! ((value && value.length >= 1) || value instanceof Object)
43+
validator: value => !!((value && value.length >= 1) || value instanceof Object),
4444
},
4545
placeholderChar: {
4646
type: String,
@@ -54,8 +54,10 @@ export default {
5454
},
5555

5656
watch: {
57-
mask() {
58-
this.initMask();
57+
mask(newValue, oldValue) {
58+
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
59+
this.initMask();
60+
}
5961
},
6062
value(newValue) {
6163
if (this.maskCore) this.maskCore.setValue(newValue); // For multiple inputs support
@@ -70,7 +72,7 @@ export default {
7072
initMask() {
7173
try {
7274
if (this.mask instanceof Object) {
73-
this.maskСore = new InputMask(this.mask)
75+
this.maskCore = new InputMask(this.mask);
7476
} else {
7577
this.maskCore = new InputMask({
7678
pattern: this.mask,

0 commit comments

Comments
 (0)