Make phone number input so you can paste into it.

This commit is contained in:
Bryan Mauger 2023-06-02 15:13:55 -04:00
parent 52daca07a7
commit e100121e89

View file

@ -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);
}, },
}, },