532 lines
16 KiB
Vue
Executable File
532 lines
16 KiB
Vue
Executable File
<template>
|
|
<InputText
|
|
:value="modelValue"
|
|
:class="cx('root')"
|
|
:readonly="readonly"
|
|
:disabled="disabled"
|
|
:invalid="invalid"
|
|
:variant="variant"
|
|
:unstyled="unstyled"
|
|
@input="onInput"
|
|
@focus="onFocus"
|
|
@blur="onBlur"
|
|
@keydown="onKeyDown"
|
|
@keypress="onKeyPress"
|
|
@paste="onPaste"
|
|
:pt="ptmi('root', ptmParams)"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import InputText from 'primevue/inputtext';
|
|
import { DomHandler } from 'primevue/utils';
|
|
import BaseInputMask from './BaseInputMask.vue';
|
|
|
|
export default {
|
|
name: 'InputMask',
|
|
extends: BaseInputMask,
|
|
inheritAttrs: false,
|
|
emits: ['update:modelValue', 'focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
|
|
watch: {
|
|
mask(newMask, oldMask) {
|
|
if (oldMask !== newMask) {
|
|
this.initMask();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initMask();
|
|
},
|
|
updated() {
|
|
if (this.isValueUpdated()) {
|
|
this.updateValue();
|
|
}
|
|
},
|
|
methods: {
|
|
onInput(event) {
|
|
if (this.androidChrome) this.handleAndroidInput(event);
|
|
else this.handleInputChange(event);
|
|
|
|
this.$emit('update:modelValue', event.target.value);
|
|
},
|
|
onFocus(event) {
|
|
if (this.readonly) {
|
|
return;
|
|
}
|
|
|
|
this.focus = true;
|
|
|
|
clearTimeout(this.caretTimeoutId);
|
|
let pos;
|
|
|
|
this.focusText = this.$el.value;
|
|
|
|
pos = this.checkVal();
|
|
|
|
this.caretTimeoutId = setTimeout(() => {
|
|
if (this.$el !== document.activeElement) {
|
|
return;
|
|
}
|
|
|
|
this.writeBuffer();
|
|
|
|
if (pos === this.mask.replace('?', '').length) {
|
|
this.caret(0, pos);
|
|
} else {
|
|
this.caret(pos);
|
|
}
|
|
}, 10);
|
|
|
|
this.$emit('focus', event);
|
|
},
|
|
onBlur(event) {
|
|
this.focus = false;
|
|
this.checkVal();
|
|
this.updateModel(event);
|
|
|
|
if (this.$el.value !== this.focusText) {
|
|
let e = document.createEvent('HTMLEvents');
|
|
|
|
e.initEvent('change', true, false);
|
|
this.$el.dispatchEvent(e);
|
|
}
|
|
|
|
this.$emit('blur', event);
|
|
},
|
|
onKeyDown(event) {
|
|
if (this.readonly) {
|
|
return;
|
|
}
|
|
|
|
let k = event.code,
|
|
pos,
|
|
begin,
|
|
end;
|
|
let iPhone = /iphone/i.test(DomHandler.getUserAgent());
|
|
|
|
this.oldVal = this.$el.value;
|
|
|
|
//backspace, delete, and escape get special treatment
|
|
if (k === 'Backspace' || k === 'Delete' || (iPhone && k === 'Escape')) {
|
|
pos = this.caret();
|
|
begin = pos.begin;
|
|
end = pos.end;
|
|
|
|
if (end - begin === 0) {
|
|
begin = k !== 'Delete' ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
|
|
end = k === 'Delete' ? this.seekNext(end) : end;
|
|
}
|
|
|
|
this.clearBuffer(begin, end);
|
|
this.shiftL(begin, end - 1);
|
|
this.updateModel(event);
|
|
|
|
event.preventDefault();
|
|
} else if (k === 'Enter') {
|
|
// enter
|
|
this.$el.blur();
|
|
this.updateModel(event);
|
|
} else if (k === 'Escape') {
|
|
// escape
|
|
this.$el.value = this.focusText;
|
|
this.caret(0, this.checkVal());
|
|
this.updateModel(event);
|
|
event.preventDefault();
|
|
}
|
|
|
|
this.$emit('keydown', event);
|
|
},
|
|
onKeyPress(event) {
|
|
if (this.readonly) {
|
|
return;
|
|
}
|
|
|
|
var k = event.code,
|
|
pos = this.caret(),
|
|
p,
|
|
c,
|
|
next,
|
|
completed;
|
|
|
|
if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey || event.key === 'CapsLock' || event.key === 'Escape' || event.key === 'Tab') {
|
|
//Ignore
|
|
return;
|
|
} else if (k && k !== 'Enter') {
|
|
if (pos.end - pos.begin !== 0) {
|
|
this.clearBuffer(pos.begin, pos.end);
|
|
this.shiftL(pos.begin, pos.end - 1);
|
|
}
|
|
|
|
p = this.seekNext(pos.begin - 1);
|
|
|
|
if (p < this.len) {
|
|
c = event.key;
|
|
|
|
if (this.tests[p].test(c)) {
|
|
this.shiftR(p);
|
|
|
|
this.buffer[p] = c;
|
|
this.writeBuffer();
|
|
next = this.seekNext(p);
|
|
|
|
if (/android/i.test(DomHandler.getUserAgent())) {
|
|
//Path for CSP Violation on FireFox OS 1.1
|
|
let proxy = () => {
|
|
this.caret(next);
|
|
};
|
|
|
|
setTimeout(proxy, 0);
|
|
} else {
|
|
this.caret(next);
|
|
}
|
|
|
|
if (pos.begin <= this.lastRequiredNonMaskPos) {
|
|
completed = this.isCompleted();
|
|
}
|
|
}
|
|
}
|
|
|
|
event.preventDefault();
|
|
}
|
|
|
|
this.updateModel(event);
|
|
|
|
if (completed) {
|
|
this.$emit('complete', event);
|
|
}
|
|
|
|
this.$emit('keypress', event);
|
|
},
|
|
onPaste(event) {
|
|
this.handleInputChange(event);
|
|
|
|
this.$emit('paste', event);
|
|
},
|
|
caret(first, last) {
|
|
let range, begin, end;
|
|
|
|
if (!this.$el.offsetParent || this.$el !== document.activeElement) {
|
|
return;
|
|
}
|
|
|
|
if (typeof first === 'number') {
|
|
begin = first;
|
|
end = typeof last === 'number' ? last : begin;
|
|
|
|
if (this.$el.setSelectionRange) {
|
|
this.$el.setSelectionRange(begin, end);
|
|
} else if (this.$el['createTextRange']) {
|
|
range = this.$el['createTextRange']();
|
|
range.collapse(true);
|
|
range.moveEnd('character', end);
|
|
range.moveStart('character', begin);
|
|
range.select();
|
|
}
|
|
} else {
|
|
if (this.$el.setSelectionRange) {
|
|
begin = this.$el.selectionStart;
|
|
end = this.$el.selectionEnd;
|
|
} else if (document['selection'] && document['selection'].createRange) {
|
|
range = document['selection'].createRange();
|
|
begin = 0 - range.duplicate().moveStart('character', -100000);
|
|
end = begin + range.text.length;
|
|
}
|
|
|
|
return { begin: begin, end: end };
|
|
}
|
|
},
|
|
isCompleted() {
|
|
for (let i = this.firstNonMaskPos; i <= this.lastRequiredNonMaskPos; i++) {
|
|
if (this.tests[i] && this.buffer[i] === this.getPlaceholder(i)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
getPlaceholder(i) {
|
|
if (i < this.slotChar.length) {
|
|
return this.slotChar.charAt(i);
|
|
}
|
|
|
|
return this.slotChar.charAt(0);
|
|
},
|
|
seekNext(pos) {
|
|
while (++pos < this.len && !this.tests[pos]);
|
|
|
|
return pos;
|
|
},
|
|
seekPrev(pos) {
|
|
while (--pos >= 0 && !this.tests[pos]);
|
|
|
|
return pos;
|
|
},
|
|
shiftL(begin, end) {
|
|
let i, j;
|
|
|
|
if (begin < 0) {
|
|
return;
|
|
}
|
|
|
|
for (i = begin, j = this.seekNext(end); i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
if (j < this.len && this.tests[i].test(this.buffer[j])) {
|
|
this.buffer[i] = this.buffer[j];
|
|
this.buffer[j] = this.getPlaceholder(j);
|
|
} else {
|
|
break;
|
|
}
|
|
|
|
j = this.seekNext(j);
|
|
}
|
|
}
|
|
|
|
this.writeBuffer();
|
|
this.caret(Math.max(this.firstNonMaskPos, begin));
|
|
},
|
|
shiftR(pos) {
|
|
let i, c, j, t;
|
|
|
|
for (i = pos, c = this.getPlaceholder(pos); i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
j = this.seekNext(i);
|
|
t = this.buffer[i];
|
|
this.buffer[i] = c;
|
|
|
|
if (j < this.len && this.tests[j].test(t)) {
|
|
c = t;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
handleAndroidInput(event) {
|
|
var curVal = this.$el.value;
|
|
var pos = this.caret();
|
|
|
|
if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
|
|
// a deletion or backspace happened
|
|
this.checkVal(true);
|
|
while (pos.begin > 0 && !this.tests[pos.begin - 1]) pos.begin--;
|
|
|
|
if (pos.begin === 0) {
|
|
while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin]) pos.begin++;
|
|
}
|
|
|
|
this.caret(pos.begin, pos.begin);
|
|
} else {
|
|
this.checkVal(true);
|
|
while (pos.begin < this.len && !this.tests[pos.begin]) pos.begin++;
|
|
|
|
this.caret(pos.begin, pos.begin);
|
|
}
|
|
|
|
if (this.isCompleted()) {
|
|
this.$emit('complete', event);
|
|
}
|
|
},
|
|
clearBuffer(start, end) {
|
|
let i;
|
|
|
|
for (i = start; i < end && i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
this.buffer[i] = this.getPlaceholder(i);
|
|
}
|
|
}
|
|
},
|
|
writeBuffer() {
|
|
this.$el.value = this.buffer.join('');
|
|
},
|
|
checkVal(allow) {
|
|
this.isValueChecked = true;
|
|
//try to place characters where they belong
|
|
let test = this.$el.value,
|
|
lastMatch = -1,
|
|
i,
|
|
c,
|
|
pos;
|
|
|
|
for (i = 0, pos = 0; i < this.len; i++) {
|
|
if (this.tests[i]) {
|
|
this.buffer[i] = this.getPlaceholder(i);
|
|
|
|
while (pos++ < test.length) {
|
|
c = test.charAt(pos - 1);
|
|
|
|
if (this.tests[i].test(c)) {
|
|
this.buffer[i] = c;
|
|
lastMatch = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (pos > test.length) {
|
|
this.clearBuffer(i + 1, this.len);
|
|
break;
|
|
}
|
|
} else {
|
|
if (this.buffer[i] === test.charAt(pos)) {
|
|
pos++;
|
|
}
|
|
|
|
if (i < this.partialPosition) {
|
|
lastMatch = i;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (allow) {
|
|
this.writeBuffer();
|
|
} else if (lastMatch + 1 < this.partialPosition) {
|
|
if (this.autoClear || this.buffer.join('') === this.defaultBuffer) {
|
|
// Invalid value. Remove it and replace it with the
|
|
// mask, which is the default behavior.
|
|
if (this.$el.value) this.$el.value = '';
|
|
this.clearBuffer(0, this.len);
|
|
} else {
|
|
// Invalid value, but we opt to show the value to the
|
|
// user and allow them to correct their mistake.
|
|
this.writeBuffer();
|
|
}
|
|
} else {
|
|
this.writeBuffer();
|
|
this.$el.value = this.$el.value.substring(0, lastMatch + 1);
|
|
}
|
|
|
|
return this.partialPosition ? i : this.firstNonMaskPos;
|
|
},
|
|
handleInputChange(event) {
|
|
const isPasteEvent = event.type === 'paste';
|
|
|
|
if (this.readonly || isPasteEvent) {
|
|
return;
|
|
}
|
|
|
|
var pos = this.checkVal(true);
|
|
|
|
this.caret(pos);
|
|
this.updateModel(event);
|
|
|
|
if (this.isCompleted()) {
|
|
this.$emit('complete', event);
|
|
}
|
|
},
|
|
getUnmaskedValue() {
|
|
let unmaskedBuffer = [];
|
|
|
|
for (let i = 0; i < this.buffer.length; i++) {
|
|
let c = this.buffer[i];
|
|
|
|
if (this.tests[i] && c !== this.getPlaceholder(i)) {
|
|
unmaskedBuffer.push(c);
|
|
}
|
|
}
|
|
|
|
return unmaskedBuffer.join('');
|
|
},
|
|
updateModel(e) {
|
|
let val = this.unmask ? this.getUnmaskedValue() : e.target.value;
|
|
|
|
this.$emit('update:modelValue', this.defaultBuffer !== val ? val : '');
|
|
},
|
|
updateValue(updateModel = true) {
|
|
if (this.$el) {
|
|
if (this.modelValue == null) {
|
|
this.$el.value = '';
|
|
updateModel && this.$emit('update:modelValue', '');
|
|
} else {
|
|
this.$el.value = this.modelValue;
|
|
this.checkVal();
|
|
|
|
setTimeout(() => {
|
|
if (this.$el) {
|
|
this.writeBuffer();
|
|
this.checkVal();
|
|
|
|
if (updateModel) {
|
|
let val = this.unmask ? this.getUnmaskedValue() : this.$el.value;
|
|
|
|
this.$emit('update:modelValue', this.defaultBuffer !== val ? val : '');
|
|
}
|
|
}
|
|
}, 10);
|
|
}
|
|
|
|
this.focusText = this.$el.value;
|
|
}
|
|
},
|
|
initMask() {
|
|
this.tests = [];
|
|
this.partialPosition = this.mask.length;
|
|
this.len = this.mask.length;
|
|
this.firstNonMaskPos = null;
|
|
this.defs = {
|
|
9: '[0-9]',
|
|
a: '[A-Za-z]',
|
|
'*': '[A-Za-z0-9]'
|
|
};
|
|
|
|
let ua = DomHandler.getUserAgent();
|
|
|
|
this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
|
|
|
|
let maskTokens = this.mask.split('');
|
|
|
|
for (let i = 0; i < maskTokens.length; i++) {
|
|
let c = maskTokens[i];
|
|
|
|
if (c === '?') {
|
|
this.len--;
|
|
this.partialPosition = i;
|
|
} else if (this.defs[c]) {
|
|
this.tests.push(new RegExp(this.defs[c]));
|
|
|
|
if (this.firstNonMaskPos === null) {
|
|
this.firstNonMaskPos = this.tests.length - 1;
|
|
}
|
|
|
|
if (i < this.partialPosition) {
|
|
this.lastRequiredNonMaskPos = this.tests.length - 1;
|
|
}
|
|
} else {
|
|
this.tests.push(null);
|
|
}
|
|
}
|
|
|
|
this.buffer = [];
|
|
|
|
for (let i = 0; i < maskTokens.length; i++) {
|
|
let c = maskTokens[i];
|
|
|
|
if (c !== '?') {
|
|
if (this.defs[c]) this.buffer.push(this.getPlaceholder(i));
|
|
else this.buffer.push(c);
|
|
}
|
|
}
|
|
|
|
this.defaultBuffer = this.buffer.join('');
|
|
this.updateValue(false);
|
|
},
|
|
isValueUpdated() {
|
|
return this.unmask ? this.modelValue != this.getUnmaskedValue() : this.defaultBuffer !== this.$el.value && this.$el.value !== this.modelValue;
|
|
}
|
|
},
|
|
computed: {
|
|
filled() {
|
|
return this.modelValue != null && this.modelValue.toString().length > 0;
|
|
},
|
|
ptmParams() {
|
|
return {
|
|
context: {
|
|
filled: this.filled
|
|
}
|
|
};
|
|
}
|
|
},
|
|
components: {
|
|
InputText
|
|
}
|
|
};
|
|
</script>
|