As someone who has previously implemented the function using pure JavaScript, I am now faced with the challenge of incorporating it into vue.js and determining which lifecycle hooks are best suited for this task. This issue arises as I am a beginner preparing for my first job test, and currently, I find myself stuck at this juncture.
The main challenge at hand is to apply a telephone mask on the input field, in the format (xx)xxxxx-xxxx. Additionally, another obstacle is to accomplish all of this within a single HTML file, while working with Vue.js v2.x and Vuetify.
This is the current setup for the input field :
<v-text-field
id="phone"
onkeypress="mask(this, mphone)"
onblur="mask(this, mphone)"
v-model="numero"
maxlength="15"
label="Número com DDD"
:rules="rulesNum"
required
>
</v-text-field>
And here are the associated functions :
function mask(object) {
setTimeout(function() {
var valueInput = mphone(object.value);
if (valueInput != object.value) {
object.value = valueInput;
}
}, 1);
}
function mphone(valueInput) {
var regex = valueInput.replace(/\D/g, "");
regex = regex.replace(/^0/, "");
if (regex.length > 10) {
regex = regex.replace(/^(\d\d)(\d{5})(\d{4}).*/, "($1) $2-$3");
} else if (regex.length > 5) {
regex = regex.replace(/^(\d\d)(\d{4})(\d{0,4}).*/, "($1) $2-$3");
} else if (regex.length > 2) {
regex = regex.replace(/(\d)(\d{4})$/,"$1-$2");
} else {
regex = regex.replace(/^(\d*)/, "($1");
}
return regex;
}