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
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 112 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 diff is collapsed.
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.mask_core = new InputMask({ this.initMask()
pattern: this.mask,
value: this.default
})
this.$refs.input.value = this.default
}, },
methods: { methods: {
getValue() { initMask() {
return this.$refs.input.value try {
this.mask_core = new InputMask({
pattern: this.mask,
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)
}
}, },
keyPress(e) { getValue() {
this.mask_core.input(e.key) if (this.mask_core === null) return '';
this.update() return this.mask_core.getValue()
}, },
keyDown(e) { keyDown(e) { //Always
this.setNativeSelection() if (this.mask_core === null) {
e.preventDefault()
return;
}
switch (e.keyCode) { switch (e.keyCode) {
//backspace //backspace
...@@ -80,24 +96,26 @@ export default { ...@@ -80,24 +96,26 @@ 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;
//left arrow //left arrow
case 37: case 37:
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
case 39: case 39:
e.preventDefault() e.preventDefault()
...@@ -108,9 +126,10 @@ export default { ...@@ -108,9 +126,10 @@ 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
case 35: case 35:
e.preventDefault() e.preventDefault()
this.$refs.input.selectionStart = this.$refs.input.selectionEnd = this.$refs.input.value.length this.$refs.input.selectionStart = this.$refs.input.selectionEnd = this.$refs.input.value.length
...@@ -119,9 +138,10 @@ export default { ...@@ -119,9 +138,10 @@ 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
case 36: case 36:
e.preventDefault() e.preventDefault()
this.$refs.input.selectionStart = this.$refs.input.selectionEnd = 0 this.$refs.input.selectionStart = this.$refs.input.selectionEnd = 0
...@@ -129,41 +149,50 @@ export default { ...@@ -129,41 +149,50 @@ 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
case 46: case 46:
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({ this.mask_core.setSelection({
start: 0, start: 0,
end: this.mask_core.getValue().length end: 0
}) })
this.mask_core.backspace() this.$refs.input.selectionStart = this.mask_core.selection.start;
this.mask_core.setSelection({ this.$refs.input.selectionEnd = this.mask_core.selection.start;
start: 0,
end: 0
})
this.$refs.input.selectionStart = 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;
} }
},
this.update() keyPress(e) { //works only on Desktop
},
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();
} }
} }
......
src/ff-polyfill.js
View file @ 11910f64
//https://gist.github.com/nuxodin/9250e56a3ce6c0446efa //https://gist.github.com/nuxodin/9250e56a3ce6c0446efa
export default function () { export default function () {
var w = window, var w = window,
d = w.document; d = w.document;
if (w.onfocusin === undefined) { if (w.onfocusin === undefined) {
d.addEventListener('focus', addPolyfill, true); d.addEventListener('focus', addPolyfill, true);
d.addEventListener('blur', addPolyfill, true); d.addEventListener('blur', addPolyfill, true);
d.addEventListener('focusin', removePolyfill, true); d.addEventListener('focusin', removePolyfill, true);
d.addEventListener('focusout', removePolyfill, true); d.addEventListener('focusout', removePolyfill, true);
} }
function addPolyfill(e) { function addPolyfill(e) {
var type = e.type === 'focus' ? 'focusin' : 'focusout'; var type = e.type === 'focus' ? 'focusin' : 'focusout';
var event = new CustomEvent(type, { var event = new CustomEvent(type, {
bubbles: true, bubbles: true,
cancelable: false cancelable: false
}); });
event.c1Generated = true; event.c1Generated = true;
e.target.dispatchEvent(event); e.target.dispatchEvent(event);
} }
function removePolyfill(e) { function removePolyfill(e) {
if (!e.c1Generated) { // focus after focusin, so chrome will the first time trigger tow times focusin if (!e.c1Generated) { // focus after focusin, so chrome will the first time trigger tow times focusin
d.removeEventListener('focus', addPolyfill, true); d.removeEventListener('focus', addPolyfill, true);
d.removeEventListener('blur', addPolyfill, true); d.removeEventListener('blur', addPolyfill, true);
d.removeEventListener('focusin', removePolyfill, true); d.removeEventListener('focusin', removePolyfill, true);
d.removeEventListener('focusout', removePolyfill, true); d.removeEventListener('focusout', removePolyfill, true);
} }
setTimeout(function () { setTimeout(function () {
d.removeEventListener('focusin', removePolyfill, true); d.removeEventListener('focusin', removePolyfill, true);
d.removeEventListener('focusout', removePolyfill, true); d.removeEventListener('focusout', removePolyfill, true);
}); });
} }
}; };
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