DEV Community

loading...

Auto Tab To Next Input Field JQuery

websolutionstuff profile image Websolutionstuff Originally published at websolutionstuff.com ・1 min read

In this example I will show you how to focus on next input when max length is reached, some time we have requirement to restrict user to add more character than set limit at that we can use Auto Tab To Next Input Field jQuery.

Here I will give you small example of jQuery Auto Tab to next input field when fill 1 character in input box after that automatically redirect to next field using 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>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide