This javascript work on desktop but not working on mobile. In mobile, focus does not jump to another input field.
const codes = document.querySelectorAll('.otp')
codes[0].focus()
codes.forEach((code, idx) => {
code.addEventListener('keydown', (e) => {
if (e.key >= 0 && e.key <= 9) {
codes[idx].value = ''
setTimeout(() => codes[idx + 1].focus(), 10)
} else if (e.key === 'Backspace') {
setTimeout(() => codes[idx - 1].focus(), 10)
}
})
});<div class="d-flex flex-row">
<input class="form-control login_form_control otp" type="text" maxlength="1">
<input class="form-control login_form_control otp" type="text" maxlength="1">
<input class="form-control login_form_control otp" type="text" maxlength="1">
<input class="form-control login_form_control otp" type="text" maxlength="1">
<input class="form-control login_form_control otp" type="text" maxlength="1">
<input class="form-control login_form_control otp" type="text" maxlength="1">
</div>In mobile, after pressing enter, you need to wait more milliseconds of focusing other inputs :D You can try using 3000 ms in timeout or more to solve. In my project, it worked.