Within my Vue page, there are three distinct input fields:
<input
id="id"
class="flex-grow bg-white p-4 text-sm items-center focus:outline-none"
type="text"
name="id"
v-model="id"
placeholder="Enter your email or phone number..."
/>
<input
v-show="phone"
id="phone"
class="flex-grow bg-white p-4 text-sm items-center focus:outline-none"
type="tel"
name="phone"
v-model="phone"
required
placeholder="Enter your phone number..."
/>
<input
v-show="email"
id="email"
class="flex-grow bg-white p-4 text-sm items-center focus:outline-none"
type="email"
name="email"
v-model="email"
required
placeholder="Enter your email..."
/>
The initial "id" field is displayed by default on the page. A watcher function monitors the value of "id". If it's a string, it switches to the email field.
If the value is numeric, the tel field replaces it.
This is the watcher in action:
watch: {
id(newVal, oldVal) {
if (this.startsWithLetter(newVal)) {
this.$nextTick(() => {
this.phone = null
this.email = newVal
this.$el.querySelector('#email').focus()
})
} else {
this.$nextTick(() => {
this.email = null
this.phone = newVal
this.$el.querySelector('#phone').focus()
})
}
},
},
Although this functionality works, there is an issue with the focus not being set properly when the new field is switched. The soft keyboard does not appear as expected.