I use focus() and also select() to focus and select next element, but this work fine in desktop,and also chrome device view (mobile) but not working in smartphone like android (I tested in chrome browser), any idea how to solve this problem?
$('.verf-code input').on('keypress',function(e) {
var key = e.which;
if (key >= 48 && key <= 57) {
$(this).addClass('hasCode').next('input').select().focus();
return true;
} else if (key == 8 || key == 46) {
$(this).removeClass('hasCode');
} else {
return false;
}
});.hasCode {
border: 1px solid orange;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>Try this:
$(".verf-code input").on("keyup", function (e) {
var key = e.which;
if ($(this).val() !== '') {
$(this).addClass('hasCode').next('input').select().focus();
}else if(key == 8 || key == 46){
$(this).removeClass('hasCode');
}
}); .hasCode {
border: 1px solid orange;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="verf-code">
<input type="number" />
<input type="number" />
<input type="number" />
<input type="number" />
</div>