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>
<div class="phonenumber-question d-flex flex-column">
<textboxQuestion
type="tel"
:max-length="12"
v-model="selectedValue"
:isRequired="isRequired"
:validationRules="validationRuleForTextBoxQuestion"
:keyDownHandler="onKeyDown"
cmsWidgetName="phoneNumberQuestionWidget" />
type="tel"
:max-length="12"
v-model="selectedValue"
:isRequired="isRequired"
:validationRules="validationRuleForTextBoxQuestion"
:keyDownHandler="onKeyDown"
@input="filterNumber"
cmsWidgetName="phoneNumberQuestionWidget" />
</div>
</template>
@ -42,11 +43,11 @@ export default {
switch (typeof modelValue) {
case "number":
initialValue = modelValue;
break;
initialValue = modelValue;
break;
default:
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
break;
initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
break;
}
const fieldOptions = {
@ -71,6 +72,11 @@ export default {
errors,
};
},
data() {
return {
phoneNumber: ''
};
},
computed: {
phoneNumberQuestionWidget() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
@ -108,13 +114,10 @@ export default {
// Update the phone number with the formatted version
return formattedNumber;
},
filterNumber() {
this.selectedValue = this.selectedValue.replace(/1/g, '');
},
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);
},
},