Remove ref prop from inputmask

pull/41/head
mertsincan 2019-08-20 15:04:01 +03:00
parent 133c348e3d
commit a2c594cf4e
1 changed files with 28 additions and 28 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<input ref="input" :class="inputClass" v-on="listeners" :value="value" /> <input :class="inputClass" v-on="listeners" :value="value" />
</template> </template>
<script> <script>
@ -29,18 +29,18 @@ export default {
caret(first, last) { caret(first, last) {
let range, begin, end; let range, begin, end;
if (!this.$refs.input.offsetParent || this.$refs.input !== document.activeElement) { if (!this.$el.offsetParent || this.$el !== document.activeElement) {
return; return;
} }
if (typeof first === 'number') { if (typeof first === 'number') {
begin = first; begin = first;
end = (typeof last === 'number') ? last : begin; end = (typeof last === 'number') ? last : begin;
if (this.$refs.input.setSelectionRange) { if (this.$el.setSelectionRange) {
this.$refs.input.setSelectionRange(begin, end); this.$el.setSelectionRange(begin, end);
} }
else if (this.$refs.input['createTextRange']) { else if (this.$el['createTextRange']) {
range = this.$refs.input['createTextRange'](); range = this.$el['createTextRange']();
range.collapse(true); range.collapse(true);
range.moveEnd('character', end); range.moveEnd('character', end);
range.moveStart('character', begin); range.moveStart('character', begin);
@ -48,9 +48,9 @@ export default {
} }
} }
else { else {
if (this.$refs.input.setSelectionRange) { if (this.$el.setSelectionRange) {
begin = this.$refs.input.selectionStart; begin = this.$el.selectionStart;
end = this.$refs.input.selectionEnd; end = this.$el.selectionEnd;
} }
else if (document['selection'] && document['selection'].createRange) { else if (document['selection'] && document['selection'].createRange) {
range = document['selection'].createRange(); range = document['selection'].createRange();
@ -123,7 +123,7 @@ export default {
} }
}, },
handleAndroidInput(event) { handleAndroidInput(event) {
var curVal = this.$refs.input.value; var curVal = this.$el.value;
var pos = this.caret(); var pos = this.caret();
if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) { if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
// a deletion or backspace happened // a deletion or backspace happened
@ -156,12 +156,12 @@ export default {
} }
}, },
writeBuffer() { writeBuffer() {
this.$refs.input.value = this.buffer.join(''); this.$el.value = this.buffer.join('');
}, },
checkVal(allow) { checkVal(allow) {
this.isValueChecked = true; this.isValueChecked = true;
//try to place characters where they belong //try to place characters where they belong
let test = this.$refs.input.value, let test = this.$el.value,
lastMatch = -1, lastMatch = -1,
i, i,
c, c,
@ -197,7 +197,7 @@ export default {
if (this.autoClear || this.buffer.join('') === this.defaultBuffer) { if (this.autoClear || this.buffer.join('') === this.defaultBuffer) {
// Invalid value. Remove it and replace it with the // Invalid value. Remove it and replace it with the
// mask, which is the default behavior. // mask, which is the default behavior.
if (this.$refs.input.value) this.$refs.input.value = ''; if (this.$el.value) this.$el.value = '';
this.clearBuffer(0, this.len); this.clearBuffer(0, this.len);
} else { } else {
// Invalid value, but we opt to show the value to the // Invalid value, but we opt to show the value to the
@ -206,7 +206,7 @@ export default {
} }
} else { } else {
this.writeBuffer(); this.writeBuffer();
this.$refs.input.value = this.$refs.input.value.substring(0, lastMatch + 1); this.$el.value = this.$el.value.substring(0, lastMatch + 1);
} }
return (this.partialPosition ? i : this.firstNonMaskPos); return (this.partialPosition ? i : this.firstNonMaskPos);
}, },
@ -239,26 +239,26 @@ export default {
this.$emit('input', (this.defaultBuffer !== val) ? val : ''); this.$emit('input', (this.defaultBuffer !== val) ? val : '');
}, },
updateValue() { updateValue() {
if (this.$refs.input) { if (this.$el) {
if (this.value == null) { if (this.value == null) {
this.$refs.input.value = ''; this.$el.value = '';
} }
else { else {
this.$refs.input.value = this.value; this.$el.value = this.value;
this.checkVal(); this.checkVal();
} }
setTimeout(() => { setTimeout(() => {
if(this.$refs.input) { if(this.$el) {
this.writeBuffer(); this.writeBuffer();
this.checkVal(); this.checkVal();
let val = this.unmask ? this.getUnmaskedValue() : this.$refs.input.value; let val = this.unmask ? this.getUnmaskedValue() : this.$el.value;
this.$emit('input', (this.defaultBuffer !== val) ? val : ''); this.$emit('input', (this.defaultBuffer !== val) ? val : '');
} }
}, 10); }, 10);
this.focusText = this.$refs.input.value; this.focusText = this.$el.value;
} }
} }
}, },
@ -312,7 +312,7 @@ export default {
}, },
watch: { watch: {
value(newValue, oldValue) { value(newValue, oldValue) {
if (oldValue && oldValue !== newValue && this.$refs.input.value !== newValue) { if (oldValue && oldValue !== newValue && this.$el.value !== newValue) {
this.updateValue(); this.updateValue();
} }
} }
@ -341,12 +341,12 @@ export default {
clearTimeout($vm.caretTimeoutId); clearTimeout($vm.caretTimeoutId);
let pos; let pos;
$vm.focusText = $vm.$refs.input.value; $vm.focusText = $vm.$el.value;
pos = $vm.checkVal(); pos = $vm.checkVal();
$vm.caretTimeoutId = setTimeout(() => { $vm.caretTimeoutId = setTimeout(() => {
if ($vm.$refs.input !== document.activeElement) { if ($vm.$el !== document.activeElement) {
return; return;
} }
$vm.writeBuffer(); $vm.writeBuffer();
@ -364,10 +364,10 @@ export default {
$vm.checkVal(); $vm.checkVal();
$vm.updateModel(event); $vm.updateModel(event);
if ($vm.$refs.input.value !== $vm.focusText) { if ($vm.$el.value !== $vm.focusText) {
let e = document.createEvent('HTMLEvents'); let e = document.createEvent('HTMLEvents');
e.initEvent('change', true, false); e.initEvent('change', true, false);
$vm.$refs.input.dispatchEvent(e); $vm.$el.dispatchEvent(e);
} }
$vm.$emit('blur', event); $vm.$emit('blur', event);
@ -382,7 +382,7 @@ export default {
begin, begin,
end; end;
let iPhone = /iphone/i.test(DomHandler.getUserAgent()); let iPhone = /iphone/i.test(DomHandler.getUserAgent());
$vm.oldVal = $vm.$refs.input.value; $vm.oldVal = $vm.$el.value;
//backspace, delete, and escape get special treatment //backspace, delete, and escape get special treatment
if (k === 8 || k === 46 || (iPhone && k === 127)) { if (k === 8 || k === 46 || (iPhone && k === 127)) {
@ -402,10 +402,10 @@ export default {
event.preventDefault(); event.preventDefault();
} else if (k === 13) { // enter } else if (k === 13) { // enter
$vm.$refs.input.blur(); $vm.$el.blur();
$vm.updateModel(event); $vm.updateModel(event);
} else if (k === 27) { // escape } else if (k === 27) { // escape
$vm.$refs.input.value = $vm.focusText; $vm.$el.value = $vm.focusText;
$vm.caret(0, $vm.checkVal()); $vm.caret(0, $vm.checkVal());
$vm.updateModel(event); $vm.updateModel(event);
event.preventDefault(); event.preventDefault();