Skip to content

V
vue-masked-input
Commit 32345392 authored by Roma's avatar Roma
Browse files
Options

Filter clipboard pasting chars

parent af792c3e
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 320 deletions
dist/build.js
View file @ 32345392
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/build.js.map
View file @ 32345392
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 32345392
{ {
"name": "vue-masked-input", "name": "vue-masked-input",
"description": "Masked input component for Vue.js 2.X", "description": "Masked input component for Vue.js 2.X",
"version": "0.2.4", "version": "0.2.5",
"author": "niksmr", "author": "niksmr",
"license": "MIT", "license": "MIT",
"homepage": "https://github.com/niksmr/vue-masked-input", "homepage": "https://github.com/niksmr/vue-masked-input",
......
src/MaskedInput.vue
View file @ 32345392
<template> <template>
<input ref="input" <input ref="input"
:value="value" :value="value"
@keydown="keyDown(arguments[0])" @keydown="keyDown(arguments[0])"
@keypress="keyPress(arguments[0])" @keypress="keyPress(arguments[0])"
@keyup="keyUp(arguments[0])" @keyup="keyUp(arguments[0])"
@textInput="textInput(arguments[0])" @textInput="textInput(arguments[0])"
@mouseup="mouseUp(arguments[0])" @mouseup="mouseUp(arguments[0])"
@focus.prevent="focusin(arguments[0])" @focus.prevent="focusin(arguments[0])"
@focusout="focusout(arguments[0])" @focusout="focusout(arguments[0])"
@cut="cut(arguments[0])" @cut="cut(arguments[0])"
@copy="copy(arguments[0])" @copy="copy(arguments[0])"
@paste="paste(arguments[0])" @paste="paste(arguments[0])"
:disabled="mask_core===null" :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: () => ({
marginLeft: 0, marginLeft: 0,
mask_core: null, mask_core: null,
updateAfterAll: false updateAfterAll: false
}), }),
props: { props: {
value: { value: {
type: String type: String
}, },
default: { default: {
type: String, type: String,
default: '' default: ''
}, },
mask: { mask: {
type: String, type: String,
required: true required: true
}, },
placeholderChar: { placeholderChar: {
type: String, type: String,
default: '_' default: '_'
}, },
}, },
watch: { watch: {
mask: function(newMask) { mask: function(newMask) {
this.initMask() this.initMask()
}, },
value: function(newValue) { value: function(newValue) {
if (this.mask_core) this.mask_core.setValue(newValue) //For multiple inputs support if (this.mask_core) this.mask_core.setValue(newValue) //For multiple inputs support
}, },
}, },
mounted() { mounted() {
this.initMask() this.initMask()
}, },
methods: { methods: {
initMask() { initMask() {
try { try {
this.mask_core = new InputMask({ this.mask_core = new InputMask({
pattern: this.mask, pattern: this.mask,
value: this.default, value: this.default,
placeholderChar: this.placeholderChar, placeholderChar: this.placeholderChar,
formatCharacters: { formatCharacters: {
'a': { 'a': {
validate: char => /^[A-Za-zА-Яа-я]$/.test(char), validate: char => /^[A-Za-zА-Яа-я]$/.test(char),
}, },
'A': { 'A': {
validate: char => /^[A-Za-zА-Яа-я]$/.test(char) , validate: char => /^[A-Za-zА-Яа-я]$/.test(char) ,
transform: char => char.toUpperCase() transform: char => char.toUpperCase()
}, },
'*': { '*': {
validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char), validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char),
}, },
'#': { '#': {
validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char), validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char),
transform: char => char.toUpperCase() transform: char => char.toUpperCase()
}, },
} }
}) })
this.$refs.input.value = this.default this.$refs.input.value = this.default
this.mask_core.setValue(this.default) this.mask_core.setValue(this.default)
this.mask_core.setSelection({ this.mask_core.setSelection({
start: 0, start: 0,
end: 0 end: 0
}) })
this.$emit('input', this.default, this.default) this.$emit('input', this.default, this.default)
} }
catch (e) { catch (e) {
this.mask_core = null this.mask_core = null
this.$refs.input.value = '0 editable chars in mask' this.$refs.input.value = '0 editable chars in mask'
this.$emit('input', this.$refs.input.value, '') this.$emit('input', this.$refs.input.value, '')
} }
}, },
getValue() { getValue() {
if (this.mask_core === null) return ''; if (this.mask_core === null) return '';
return this.mask_core.getValue() return this.mask_core.getValue()
}, },
keyDown(e) { //Always keyDown(e) { //Always
if (this.mask_core === null) { if (this.mask_core === null) {
e.preventDefault() e.preventDefault()
return; return;
} }
this.setNativeSelection() this.setNativeSelection()
switch (e.keyCode) { switch (e.keyCode) {
//backspace //backspace
case 8: case 8:
e.preventDefault() e.preventDefault()
if ( if (
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() 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.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() this.updateToCoreState()
break; break;
//right arrow //right arrow
case 39: case 39:
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.selectionEnd++; this.$refs.input.selectionEnd++;
this.mask_core.selection = { this.mask_core.selection = {
start: this.$refs.input.selectionEnd, start: this.$refs.input.selectionEnd,
end: this.$refs.input.selectionEnd end: this.$refs.input.selectionEnd
} }
this.updateToCoreState() 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
this.mask_core.selection = { this.mask_core.selection = {
start: this.$refs.input.selectionEnd, start: this.$refs.input.selectionEnd,
end: this.$refs.input.selectionEnd end: this.$refs.input.selectionEnd
} }
this.updateToCoreState() 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
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() 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) {
this.mask_core.setValue(''); this.mask_core.setValue('');
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() this.updateToCoreState()
break; break;
} }
}, },
input(e) { input(e) {
}, },
keyPress(e) { //works only on Desktop keyPress(e) { //works only on Desktop
if (e.ctrlKey) return; //Fix FF copy/paste issue if (e.ctrlKey) return; //Fix FF copy/paste issue
/* /*
IE & FF are not trigger textInput event, so we have to force it IE & FF are not trigger textInput event, so we have to force it
*/ */
let isIE = /*@cc_on!@*/false || !!document.documentMode; //by http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser let isIE = /*@cc_on!@*/false || !!document.documentMode; //by http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
let isFirefox = typeof InstallTrigger !== 'undefined'; let isFirefox = typeof InstallTrigger !== 'undefined';
if (isIE || isFirefox) { if (isIE || isFirefox) {
e.preventDefault() e.preventDefault()
e.data = e.key e.data = e.key
this.textInput(e) this.textInput(e)
} }
}, },
textInput(e) { textInput(e) {
if (e.preventDefault) e.preventDefault() if (e.preventDefault) e.preventDefault()
if (this.mask_core.input(e.data)) { if (this.mask_core.input(e.data)) {
this.updateAfterAll = true this.updateAfterAll = true
} }
this.updateToCoreState() this.updateToCoreState()
}, },
keyUp(e) { keyUp(e) {
this.updateToCoreState() this.updateToCoreState()
this.updateAfterAll = false 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
)*/ )*/
try { try {
document.execCommand('copy') document.execCommand('copy')
} catch (err) {} } catch (err) {}
this.mask_core.backspace() this.mask_core.backspace()
this.updateToCoreState() this.updateToCoreState()
} }
}, },
copy(e) { copy(e) {
}, },
paste(e) { paste(e) {
e.preventDefault() e.preventDefault()
this.mask_core.paste(e.clipboardData.getData('text')) let text = e.clipboardData.getData('text')
this.updateToCoreState() for (let i = 0; i < text.length; ++i) {
}, this.mask_core.input(text[i])
}
updateToCoreState() { this.updateToCoreState()
if (this.mask_core === null) { },
return;
} updateToCoreState() {
if (this.$refs.input.value !== this.mask_core.getValue()) { if (this.mask_core === null) {
this.$refs.input.value = this.mask_core.getValue() return;
this.$emit('input', this.$refs.input.value, this.mask_core.getRawValue()) }
} if (this.$refs.input.value !== this.mask_core.getValue()) {
this.$refs.input.selectionStart = this.mask_core.selection.start; this.$refs.input.value = this.mask_core.getValue()
this.$refs.input.selectionEnd = this.mask_core.selection.end; this.$emit('input', this.$refs.input.value, this.mask_core.getRawValue())
}, }
this.$refs.input.selectionStart = this.mask_core.selection.start;
focusin(e) { this.$refs.input.selectionEnd = this.mask_core.selection.end;
}, },
isEmpty() { focusin(e) {
if (this.mask_core === null) return true; },
return this.mask_core.getValue() === this.mask_core.emptyValue
}, isEmpty() {
if (this.mask_core === null) return true;
focusout(e) { return this.mask_core.getValue() === this.mask_core.emptyValue
if (this.isEmpty()) { },
this.$refs.input.value = this.default
this.mask_core.setSelection({ focusout(e) {
start: 0, if (this.isEmpty()) {
end: 0 this.$refs.input.value = this.default
}) this.mask_core.setSelection({
this.$emit('input', this.default, this.default) start: 0,
} end: 0
}, })
this.$emit('input', this.default, this.default)
setNativeSelection() { }
this.mask_core.selection = { },
start: this.$refs.input.selectionStart,
end: this.$refs.input.selectionEnd setNativeSelection() {
} this.mask_core.selection = {
}, start: this.$refs.input.selectionStart,
end: this.$refs.input.selectionEnd
mouseUp(e) { }
if (this.isEmpty() && },
this.$refs.input.selectionStart === this.$refs.input.selectionEnd) {
this.mask_core.setSelection({ mouseUp(e) {
start: 0, if (this.isEmpty() &&
end: 0 this.$refs.input.selectionStart === this.$refs.input.selectionEnd) {
}) this.mask_core.setSelection({
this.$refs.input.selectionStart = this.mask_core.selection.start; start: 0,
this.$refs.input.selectionEnd = this.mask_core.selection.start; end: 0
this.marginLeft = this.mask_core.selection.start; })
this.updateToCoreState(); this.$refs.input.selectionStart = this.mask_core.selection.start;
} this.$refs.input.selectionEnd = this.mask_core.selection.start;
else { this.marginLeft = this.mask_core.selection.start;
this.setNativeSelection(); this.updateToCoreState();
} }
} else {
} this.setNativeSelection();
}
} }
</script> }
}
</script>
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