Make phone number input so you can paste into it.
This commit is contained in:
parent
52daca07a7
commit
e100121e89
1 changed files with 20 additions and 17 deletions
|
|
@ -1,13 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="phonenumber-question d-flex flex-column">
|
<div class="phonenumber-question d-flex flex-column">
|
||||||
<textboxQuestion
|
<textboxQuestion
|
||||||
type="tel"
|
type="tel"
|
||||||
:max-length="12"
|
:max-length="12"
|
||||||
v-model="selectedValue"
|
v-model="selectedValue"
|
||||||
:isRequired="isRequired"
|
:isRequired="isRequired"
|
||||||
:validationRules="validationRuleForTextBoxQuestion"
|
:validationRules="validationRuleForTextBoxQuestion"
|
||||||
:keyDownHandler="onKeyDown"
|
:keyDownHandler="onKeyDown"
|
||||||
cmsWidgetName="phoneNumberQuestionWidget" />
|
@input="filterNumber"
|
||||||
|
cmsWidgetName="phoneNumberQuestionWidget" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -42,11 +43,11 @@ export default {
|
||||||
|
|
||||||
switch (typeof modelValue) {
|
switch (typeof modelValue) {
|
||||||
case "number":
|
case "number":
|
||||||
initialValue = modelValue;
|
initialValue = modelValue;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
|
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
const fieldOptions = {
|
const fieldOptions = {
|
||||||
|
|
@ -71,6 +72,11 @@ export default {
|
||||||
errors,
|
errors,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
phoneNumber: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
phoneNumberQuestionWidget() {
|
phoneNumberQuestionWidget() {
|
||||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||||
|
|
@ -108,13 +114,10 @@ export default {
|
||||||
// Update the phone number with the formatted version
|
// Update the phone number with the formatted version
|
||||||
return formattedNumber;
|
return formattedNumber;
|
||||||
},
|
},
|
||||||
|
filterNumber() {
|
||||||
|
this.selectedValue = this.selectedValue.replace(/1/g, '');
|
||||||
|
},
|
||||||
onKeyDown(event) {
|
onKeyDown(event) {
|
||||||
if (
|
|
||||||
(this.selectedValue.length === 0 && event.key === "1") ||
|
|
||||||
(event.keyCode >= 65 && event.keyCode <= 90)
|
|
||||||
) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
this.formatPhoneNumber(event.target.value + event.key);
|
this.formatPhoneNumber(event.target.value + event.key);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue