Auto Tab To Next Input Field JQuery
1 min readJan 7, 2021
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.
And in this post i used keyup(), next() and focus() function for auto tab 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>
Thanks for Reading !!
