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>
|
||||
<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);
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue