Skip to content

Commit bfd5a53

Browse files
niksmrniksmr
committed
Paste chars filter back, default value override fix, '+' char added
1 parent cb9d6ca commit bfd5a53

File tree

6 files changed

+56
-27
lines changed

6 files changed

+56
-27
lines changed

‎README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,21 @@ The following format characters define editable parts of the mask (see [inputmas
2121
* `A` - letter, forced to upper case when entered
2222
* `*` - alphanumeric
2323
* `#` - alphanumeric, forced to upper case when entered
24+
* `+` - any character
2425

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

3031
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:
3132
```vue
32-
<masked-input mask="+\\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
33+
<masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
3334
```
3435

35-
Placeholder character is customizable (`_` by default):
36+
Placeholder character is customizable by `placeholder-char` attribute:
3637
```vue
37-
<masked-input v-model="phone" mask="+\\1 (111) 111-1111" placeholderChar="-" placeholder="Phone number" type="tel" />
38+
<masked-input v-model="phone" mask="\+\1 (111) 111-1111" placeholder-char="-" placeholder="Phone number" type="tel" />
3839
```
3940

4041
## Known issues/TODO

‎dist/build.js

Lines changed: 6 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/build.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.

‎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.2.6",
4+
"version": "0.3.1",
55
"author": "niksmr",
66
"license": "MIT",
77
"homepage": "https://github.com/niksmr/vue-masked-input",

‎src/App.vue

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,44 +13,56 @@
1313
<li>A – letter, forced to upper case when entered</li>
1414
<li>* – alphanumeric</li>
1515
<li># – alphanumeric, forced to upper case when entered</li>
16+
<li>+ – any character</li>
1617
</ul>
18+
19+
1720
<h4>Date: </h4>
1821
<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"/><span>{{ date }}</span>
1922
<p class="code">
2023
&lt;masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /&gt;
2124
</p>
25+
2226
<h4>Phone: </h4>
23-
<masked-input v-model="phone" mask="+\1 (111) 1111-11" placeholder="Phone" /><span>{{ phone }}</span>
27+
<masked-input v-model="phone" mask="\+\1 (111) 1111-11" placeholder="Phone" /><span>{{ phone }}</span>
2428
<p class="code">
25-
&lt;masked-input v-model="phone" mask="+\1 (111) 1111-11" placeholder="Phone" /&gt;
29+
&lt;masked-input v-model="phone" mask="\+\1 (111) 1111-11" placeholder="Phone" /&gt;
2630
</p>
31+
2732
<h4>Get a raw value: </h4>
28-
<masked-input mask="+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" /><span>{{ rawVal }}</span>
33+
<masked-input mask="\+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" /><span>{{ rawVal }}</span>
2934
<p class="code">
30-
&lt;masked-input mask=&quot;+\1 (111) 1111-11&quot; placeholder=&quot;Phone&quot; <br />&nbsp;&nbsp;@input=&quot;rawVal = arguments[1]&quot; /&gt;
35+
&lt;masked-input mask=&quot;\+\1 (111) 1111-11&quot; placeholder=&quot;Phone&quot; <br />&nbsp;&nbsp;@input=&quot;rawVal = arguments[1]&quot; /&gt;
3136
</p>
37+
3238
<h4>Your own mask (hot re-mask available): </h4>
3339
<input v-model="userMask" placeholder="Mask" />
3440
<masked-input v-model="userField" :mask="userMask" placeholder="Text" /><span>{{ userField }}</span>
3541
<br />
3642
<br />
43+
3744
<h4>Install </h4>
3845
<p class="code">
3946
npm install vue-masked-input --save
4047
</p>
48+
4149
<h4>Use</h4>
4250
<p class="code">
4351
import MaskedInput from 'vue-masked-input'
4452
<br /> ... <br />components: { <br />&nbsp;&nbsp;MaskedInput <br />}
4553
</p>
4654
<br />
55+
4756
<h4>Check <a href="https://github.com/niksmr/vue-masked-input">GitHub</a> for more</h4>
4857
<br />
4958
</div>
5059
</template>
5160

5261
<script>
53-
import MaskedInput from './MaskedInput.vue';
62+
import MaskedInput from './MaskedInput.vue'
63+
import VeeValidate from 'vee-validate'
64+
import Vue from 'vue'
65+
Vue.use(VeeValidate)
5466
5567
export default {
5668
name: 'app',

‎src/MaskedInput.vue

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
@cut="cut(arguments[0])"
1212
@copy="copy(arguments[0])"
1313
@paste="paste(arguments[0])"
14-
:disabled="mask_core===null"
14+
:disabled="mask_core===null || disabled"
1515
/>
1616
</template>
1717

@@ -34,10 +34,6 @@ export default {
3434
value: {
3535
type: String
3636
},
37-
default: {
38-
type: String,
39-
default: ''
40-
},
4137
mask: {
4238
type: String,
4339
required: true,
@@ -48,6 +44,10 @@ export default {
4844
default: '_',
4945
validator: value => !! (value && value.length === 1)
5046
},
47+
disabled: {
48+
type: Boolean,
49+
default: false
50+
}
5151
},
5252
5353
watch: {
@@ -69,7 +69,7 @@ export default {
6969
try {
7070
this.mask_core = new InputMask({
7171
pattern: this.mask,
72-
value: this.default,
72+
value: '',
7373
placeholderChar: this.placeholderChar,
7474
formatCharacters: {
7575
'a': {
@@ -86,15 +86,26 @@ export default {
8686
validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char),
8787
transform: char => char.toUpperCase()
8888
},
89+
'+': {
90+
validate: char => true,
91+
},
8992
}
9093
})
91-
this.$refs.input.value = this.default
92-
this.mask_core.setValue(this.default)
94+
for (let i = 0; i < this.$refs.input.value.length; ++i) {
95+
this.mask_core.input(this.$refs.input.value[i])
96+
}
9397
this.mask_core.setSelection({
9498
start: 0,
9599
end: 0
96100
})
97-
this.$emit('input', this.default, this.default)
101+
if (this.$refs.input.value === '') {
102+
this.$emit('input', '', '')
103+
}
104+
else {
105+
this.updateToCoreState()
106+
}
107+
108+
98109
}
99110
catch (e) {
100111
console.error(e.message);
@@ -256,7 +267,10 @@ export default {
256267
257268
paste(e) {
258269
e.preventDefault()
259-
this.mask_core.paste(e.clipboardData.getData('text'))
270+
let text = e.clipboardData.getData('text')
271+
for (let i = 0; i < text.length; ++i) {
272+
this.mask_core.input(text[i])
273+
}
260274
this.updateToCoreState()
261275
},
262276
@@ -282,12 +296,12 @@ export default {
282296
283297
focusout(e) {
284298
if (this.isEmpty()) {
285-
this.$refs.input.value = this.default
299+
this.$refs.input.value = ''
286300
this.mask_core.setSelection({
287301
start: 0,
288302
end: 0
289303
})
290-
this.$emit('input', this.default, this.default)
304+
this.$emit('input', '', '')
291305
}
292306
},
293307

0 commit comments

Comments
 (0)