Autotab To Next Input Field JQuery

WebSolutionStuff | Aug-19-2020 | Categories : PHP jQuery HTML

In this example i will show you how to focus on next input when maxlength is reached, some time we have requirement to restrict user to add more character than set limit at that we can use Autotab To Next Input Field JQuery.

Here i will give you small example of JQuery Autotab to next input field when fill 1 character jQuery.

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
input { 
width: 25px; margin: 5px; height:25px;  
}
</style>

</head>
<body>

<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<script>
$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});
</script>
</body>
</html>

 

Featured Post