Skip to content

V
vue-masked-input
Commit 11910f64 authored by NikulinR's avatar NikulinR
Browse files
Options

refact, mobile chrome supp added

parent 40a6b871
Show whitespace changes
Inline Side-by-side
Showing with 117 additions and 76 deletions
dist/build.js
View file @ 11910f64
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/build.js.map
View file @ 11910f64
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
View file @ 11910f64
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#4fc08d">
<title>vue-masked-input</title> <title>vue-masked-input</title>
</head> </head>
<body>
<body>
<div id="app"></div> <div id="app"></div>
<script src="./dist/build.js"></script> <script src="./dist/build.js"></script>
</body> </body>
</html> </html>
src/App.vue
View file @ 11910f64
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
</p> </p>
<br /> <br />
<h4>Check <a href="https://github.com/niksmr/vue-masked-input">GitHub</a> for more</h4> <h4>Check <a href="https://github.com/niksmr/vue-masked-input">GitHub</a> for more</h4>
<br />
</div> </div>
</template> </template>
...@@ -76,6 +77,7 @@ body { ...@@ -76,6 +77,7 @@ body {
} }
input { input {
margin: 12px 0;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
padding: 8px 16px; padding: 8px 16px;
...@@ -107,7 +109,8 @@ h4 { ...@@ -107,7 +109,8 @@ h4 {
span { span {
opacity: 0.5; opacity: 0.5;
margin-left: 32px; margin-left: 16px;
white-space: nowrap;
} }
.code { .code {
......
src/MaskedInput.vue
View file @ 11910f64
<template> <template>
<input ref="input" :value="value" @keypress.prevent="keyPress(arguments[0])" @keydown="keyDown(arguments[0])" @mouseup="mouseUp(arguments[0])" @focus.prevent="focusin(arguments[0])" @focusout="focusout(arguments[0])" @cut="cut(arguments[0])" @copy="copy(arguments[0])" <input ref="input"
@paste="paste(arguments[0])" /> :value="value"
@keydown="keyDown(arguments[0])"
@keypress="keyPress(arguments[0])"
@keyup="keyUp(arguments[0])"
@textInput="textInput(arguments[0])"
@mouseup="mouseUp(arguments[0])"
@focus.prevent="focusin(arguments[0])"
@focusout="focusout(arguments[0])"
@cut="cut(arguments[0])"
@copy="copy(arguments[0])"
@paste="paste(arguments[0])"
:disabled="mask_core===null"
/>
</template> </template>
<script> <script>
import InputMask from 'inputmask-core'; import InputMask from 'inputmask-core'
import ffpoly from './ff-polyfill.js'; //Firefox Polyfill for focus events import ffpoly from './ff-polyfill.js' //Firefox Polyfill for focus events
ffpoly(); ffpoly()
export default { export default {
name: 'MaskedInput', name: 'MaskedInput',
data: () => ({ data: () => ({
firstFocus: true,
marginLeft: 0, marginLeft: 0,
mask_core: null mask_core: null,
updateAfterAll: false
}), }),
props: { props: {
...@@ -33,44 +45,48 @@ export default { ...@@ -33,44 +45,48 @@ export default {
}, },
watch: { watch: {
// whenever question changes, this function will run
mask: function(newMask) { mask: function(newMask) {
try { this.initMask()
this.mask_core = new InputMask({
pattern: newMask,
value: this.default
})
} catch (e) {
this.mask_core = new InputMask({
pattern: 'B\\ad1M\\ask',
value: this.default
})
}
this.update();
} }
}, },
mounted() { mounted() {
this.initMask()
},
methods: {
initMask() {
try {
this.mask_core = new InputMask({ this.mask_core = new InputMask({
pattern: this.mask, pattern: this.mask,
value: this.default value: this.default
}) })
this.$refs.input.value = this.default this.$refs.input.value = this.mask_core.setValue = this.default
this.mask_core.setSelection({
start: 0,
end: 0
})
this.$emit('input', this.default)
}
catch (e) {
this.mask_core = null
this.$refs.input.value = '0 editable chars in mask'
this.$emit('input', this.$refs.input.value)
}
}, },
methods: {
getValue() { getValue() {
return this.$refs.input.value if (this.mask_core === null) return '';
return this.mask_core.getValue()
}, },
keyPress(e) { keyDown(e) { //Always
this.mask_core.input(e.key) if (this.mask_core === null) {
this.update() e.preventDefault()
}, return;
}
keyDown(e) {
this.setNativeSelection()
switch (e.keyCode) { switch (e.keyCode) {
//backspace //backspace
...@@ -80,7 +96,8 @@ export default { ...@@ -80,7 +96,8 @@ export default {
this.mask_core.selection.start > this.marginLeft || this.mask_core.selection.start > this.marginLeft ||
this.mask_core.selection.start != this.mask_core.selection.end this.mask_core.selection.start != this.mask_core.selection.end
) { ) {
this.mask_core.backspace(); this.mask_core.backspace()
this.updateToCoreState()
} }
break; break;
...@@ -89,12 +106,13 @@ export default { ...@@ -89,12 +106,13 @@ export default {
e.preventDefault() e.preventDefault()
if (this.$refs.input.selectionStart === this.$refs.input.selectionEnd) if (this.$refs.input.selectionStart === this.$refs.input.selectionEnd)
this.$refs.input.selectionStart-- this.$refs.input.selectionEnd = this.$refs.input.selectionStart--
this.mask_core.selection = { this.mask_core.selection = {
start: this.$refs.input.selectionStart, start: this.$refs.input.selectionStart,
end: this.$refs.input.selectionStart end: this.$refs.input.selectionStart
} }
this.updateToCoreState()
break; break;
//right arrow //right arrow
...@@ -108,6 +126,7 @@ export default { ...@@ -108,6 +126,7 @@ export default {
start: this.$refs.input.selectionEnd, start: this.$refs.input.selectionEnd,
end: this.$refs.input.selectionEnd end: this.$refs.input.selectionEnd
} }
this.updateToCoreState()
break; break;
//end //end
...@@ -119,6 +138,7 @@ export default { ...@@ -119,6 +138,7 @@ export default {
start: this.$refs.input.selectionEnd, start: this.$refs.input.selectionEnd,
end: this.$refs.input.selectionEnd end: this.$refs.input.selectionEnd
} }
this.updateToCoreState()
break; break;
//home //home
...@@ -129,6 +149,7 @@ export default { ...@@ -129,6 +149,7 @@ export default {
start: this.$refs.input.selectionStart, start: this.$refs.input.selectionStart,
end: this.$refs.input.selectionStart end: this.$refs.input.selectionStart
} }
this.updateToCoreState()
break; break;
//delete //delete
...@@ -136,34 +157,42 @@ export default { ...@@ -136,34 +157,42 @@ export default {
e.preventDefault() e.preventDefault()
if (this.$refs.input.selectionStart === this.$refs.input.selectionEnd) { if (this.$refs.input.selectionStart === this.$refs.input.selectionEnd) {
if (this.$refs.input.selectionEnd !== this.mask_core.length) { this.mask_core.setValue('');
this.mask_core.setSelection({
start: 0,
end: this.mask_core.getValue().length
})
this.mask_core.backspace()
this.mask_core.setSelection({ this.mask_core.setSelection({
start: 0, start: 0,
end: 0 end: 0
}) })
this.$refs.input.selectionStart = this.mask_core.selection.start; this.$refs.input.selectionStart = this.mask_core.selection.start;
this.$refs.input.selectionEnd = this.mask_core.selection.start; this.$refs.input.selectionEnd = this.mask_core.selection.start;
}
} else { } else {
this.mask_core.backspace() this.mask_core.backspace()
} }
this.updateToCoreState()
break; break;
} }
},
keyPress(e) { //works only on Desktop
},
this.update() textInput(e) {
e.preventDefault()
if (this.mask_core.input(e.data)) {
this.updateToCoreState()
this.updateAfterAll = true
}
},
keyUp(e) {
if (this.updateAfterAll) this.updateToCoreState()
this.updateAfterAll = false
}, },
cut(e) { cut(e) {
e.preventDefault(); e.preventDefault();
if (this.$refs.input.selectionStart !== this.$refs.input.selectionEnd) { if (this.$refs.input.selectionStart !== this.$refs.input.selectionEnd) {
let text = this.$refs.input.value.slice( let text = this.$refs.input.value.slice(
this.$refs.input.selectionStart, this.$refs.input.selectionStart,
this.$refs.input.selectionEnd this.$refs.input.selectionEnd
...@@ -172,20 +201,22 @@ export default { ...@@ -172,20 +201,22 @@ export default {
document.execCommand('copy') document.execCommand('copy')
} catch (err) {} } catch (err) {}
this.mask_core.backspace() this.mask_core.backspace()
this.update() this.updateToCoreState()
} }
}, },
copy(e) {}, copy(e) {},
paste(e) { paste(e) {
e.preventDefault(); e.preventDefault()
this.mask_core.paste(e.clipboardData.getData('text')) this.mask_core.paste(e.clipboardData.getData('text'))
this.update() this.updateToCoreState()
}, },
update() { updateToCoreState() {
if (this.mask_core === null) {
return;
}
this.$refs.input.value = this.mask_core.getValue() this.$refs.input.value = this.mask_core.getValue()
this.$refs.input.selectionStart = this.mask_core.selection.start; this.$refs.input.selectionStart = this.mask_core.selection.start;
this.$refs.input.selectionEnd = this.mask_core.selection.end; this.$refs.input.selectionEnd = this.mask_core.selection.end;
...@@ -193,12 +224,11 @@ export default { ...@@ -193,12 +224,11 @@ export default {
}, },
focusin(e) { focusin(e) {
this.mask_core.setValue(this.value)
this.update()
}, },
isEmpty() { isEmpty() {
return this.mask_core.emptyValue === this.$refs.input.value if (this.mask_core === null) return true;
return this.mask_core.getValue() === this.mask_core.emptyValue
}, },
focusout(e) { focusout(e) {
...@@ -208,7 +238,7 @@ export default { ...@@ -208,7 +238,7 @@ export default {
start: 0, start: 0,
end: 0 end: 0
}) })
this.$emit('input', '') this.$emit('input', this.default)
} }
}, },
...@@ -220,7 +250,7 @@ export default { ...@@ -220,7 +250,7 @@ export default {
}, },
mouseUp(e) { mouseUp(e) {
if (this.$refs.input.value === this.mask_core.emptyValue && if (this.isEmpty() &&
this.$refs.input.selectionStart === this.$refs.input.selectionEnd) { this.$refs.input.selectionStart === this.$refs.input.selectionEnd) {
this.mask_core.setSelection({ this.mask_core.setSelection({
start: 0, start: 0,
...@@ -229,8 +259,9 @@ export default { ...@@ -229,8 +259,9 @@ export default {
this.$refs.input.selectionStart = this.mask_core.selection.start; this.$refs.input.selectionStart = this.mask_core.selection.start;
this.$refs.input.selectionEnd = this.mask_core.selection.start; this.$refs.input.selectionEnd = this.mask_core.selection.start;
this.marginLeft = this.mask_core.selection.start; this.marginLeft = this.mask_core.selection.start;
this.updateToCoreState();
} else { }
else {
this.setNativeSelection(); this.setNativeSelection();
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment