мой код --html -
<div class="col-12 row">
<div class="col-12 row justify-start" style="font-weight:700;">
<p class="col-12" style="margin-bottom:unset;">Your Mobile number</p>
<p style="margin-bottom:unset;" class="sub-label">Example: 91234567</p>
</div>
<div class="col-12 row">
<div class="col-12 justify-center">
<input
id="mobile1"
type="number"
pattern="\d*"
v-model="mobile1"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile1, $event, $refs.mobile2)"
ref="mobile1"
autofocus
>
<input
id="mobile2"
type="number"
pattern="\d*"
v-model="mobile2"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile1, $event, $refs.mobile3)"
@focus="onBoxFocus($event)"
ref="mobile2"
>
<input
id="mobile3"
type="number"
pattern="\d*"
v-model="mobile3"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile2, $event, $refs.mobile4)"
@focus="onBoxFocus($event)"
ref="mobile3"
>
<input
id="mobile4"
type="number"
pattern="\d*"
v-model="mobile4"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile3, $event, $refs.mobile5)"
@focus="onBoxFocus($event)"
ref="mobile4"
>
<input
id="mobile5"
type="number"
pattern="\d*"
v-model="mobile5"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile4, $event, $refs.mobile6)"
@focus="onBoxFocus($event)"
ref="mobile5"
>
<input
id="mobile6"
type="number"
pattern="\d*"
v-model="mobile6"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile5, $event, $refs.mobile7)"
@focus="onBoxFocus($event)"
ref="mobile6"
>
<input
id="mobile7"
type="number"
pattern="\d*"
v-model="mobile7"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile6, $event, $refs.mobile8)"
@focus="onBoxFocus($event)"
ref="mobile7"
>
<input
id="mobile8"
type="number"
pattern="\d*"
v-model="mobile8"
class="modifyInput"
maxlength="1"
size="1"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
@keyup="jump($refs.mobile7, $event, $refs.mobile8)"
@focus="onBoxFocus($event)"
ref="mobile8"
>
</div>
</div>
</div>
- javascript -
jump (before, event, next) {
// console.log('this[event.target.id]', this[event.target.id])
// console.log('this.beforeFocus: ', this.beforeFocus)
event.preventDefault()
if (this.$q.platform.is.platform === 'iphone') {
if (event.key === 'Backspace') {
if (this[event.target.id] === '' && this.beforeFocus) {
// before.focus()
setTimeout(() => before.focus(), 0)
this.beforeFocus = false
} else {
if (this[event.target.id] === '') {
this.beforeFocus = true
}
}
if (next === event.target && this.pinLast) {
this.pinLast = false
}
} else if ((event.keyCode >= 48) && (event.keyCode <= 57) && (event.code <= 'KeyA')) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
// next.focus()
setTimeout(() => next.focus(), 0)
} else if (event.keyCode === 229) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
if (event.target.value) {
// next.focus()
setTimeout(() => next.focus(), 0)
}
}
} else {
if (event.key === 'Backspace') {
if (this[event.target.id] === '' && this.beforeFocus) {
// before.focus()
setTimeout(() => before.focus(), 0)
this.beforeFocus = false
} else {
if (this[event.target.id] === '') {
this.beforeFocus = true
}
}
// console.log('this.beforeFocus: ', this.beforeFocus)
if (next === event.target && this.pinLast) {
this.pinLast = false
}
} else if ((event.keyCode >= 48) && (event.keyCode <= 57) && (event.code <= 'KeyA')) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
// next.focus()
setTimeout(() => next.focus(), 0)
} else if (event.keyCode === 229) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
if (event.target.value) {
next.focus()
setTimeout(() => next.focus(), 0)
}
}
}
},
jumpAphabet (before, event, next) {
// event.preventDefault()
// console.log('this[event.target.id]', this[event.target.id])
// console.log('this.beforeFocus: ', this.beforeFocus)
if (this.$q.platform.is.platform === 'iphone') {
if (event.key === 'Backspace') {
if (this[event.target.id] === '' && this.beforeFocus) {
// before.focus()
setTimeout(() => before.focus(), 0)
this.beforeFocus = false
} else {
if (this[event.target.id] === '') {
this.beforeFocus = true
}
}
// console.log('this.beforeFocus: ', this.beforeFocus)
// if (next === event.target && this.pinLast) {
// this[event.target.id] = ''
// this.pinLast = false
// } else {
// this[before.id] = ''
// before.focus()
// }
if (next === event.target && this.pinLast) {
this.pinLast = false
}
} else if ((event.keyCode >= 65) && (event.keyCode <= 90)) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
// next.focus()
setTimeout(() => next.focus(), 0)
} else if (event.keyCode === 229) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
if (event.target.value) {
// next.focus()
setTimeout(() => next.focus(), 0)
}
}
} else {
if (event.key === 'Backspace') {
if (this[event.target.id] === '' && this.beforeFocus) {
// before.focus()
setTimeout(() => before.focus(), 0)
this.beforeFocus = false
} else {
if (this[event.target.id] === '') {
this.beforeFocus = true
}
}
// console.log('this.beforeFocus: ', this.beforeFocus)
// if (this.beforeFocus) {
// before.focus()
// this.beforeFocus = false
// }
// if (next === event.target && this.pinLast) {
// this[event.target.id] = ''
// this.pinLast = false
// } else {
// this[before.id] = ''
// before.focus()
// }
if (next === event.target && this.pinLast) {
this.pinLast = false
}
} else if ((event.keyCode >= 65) && (event.keyCode <= 90)) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
// next.focus()
setTimeout(() => next.focus(), 0)
} else if (event.keyCode === 229) {
if (next === event.target) {
this.pinLast = true
this.beforeFocus = false
}
if (event.target.value) {
// next.focus()
setTimeout(() => next.focus(), 0)
}
}
}
},