I have tried this but on keyup not working to jump next input but backspace working find.
Looking features:
$('.col').on('input', '.press', function() {
if (this.value.length >= this.maxLength) {
$(this).parent().next('div.col').find('input').focus();
}
}).keyup(function(e) {
if (e.which === 8 && !this.value) {
$(this).prev().find('input').focus();
}
});body{display: flex;}
.form-control{width: 70px;
margin-right: 10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off">
</div>
</div>I've added an attribute tabindex on the input type text field. The tabindex attribute identifies each next tab index to be focus. Javascript keyup event will now jump to the next input which I increment it to the current focus index.
I've also added a paste event listener on the input type text and get the length of the data then paste the value on it.
$(function(){
document.querySelector('input').addEventListener("paste", function(p)
{
var dataLength = p.clipboardData.getData('text').length;
for(var i = 1; i <= dataLength; i++)
{
$("input[tabindex='"+ i + "']").val(p.clipboardData.getData('text')[i - 1]);
if (this.value.length >= this.maxLength)
{
$("input[tabindex='"+ i + "']").focus();
}
}
});
$('input[type="text"]').on('keyup', function(e)
{
if (this.value.length >= this.maxLength)
{
if(e.keyCode !== 9 && e.keyCode !== 16)
{
var tabIndex = this.tabIndex + 1;
$("input[tabindex='"+ this.tabIndex + "']").val(this.value);
$("input[tabindex='"+ tabIndex + "']").focus();
}
}
else
{
if(e.keyCode === 8)
{
var tabIndex = this.tabIndex - 1;
$("input[tabindex='"+ tabIndex + "']").focus();
}
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" tabindex="1" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" tabindex="2" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" tabindex="3" autocomplete="off">
</div>
</div>
<div class="col">
<div class="form-group">
<input type="text" class="press form-control" name="code" maxlength="1" tabindex="4" autocomplete="off">
</div>
</div>