In this article, we will see how to focus on the next input when the max length is reached. Sometimes we have a requirement to restrict users to add more characters than the set limit at that we can use the auto tab to next input field jquery. we will see onkeyup focus is moved to the next field.
So, let's see the auto tab in form fields or how to autofocus on the next text input.
Here I will give you an example of the jQuery auto tab to the next input field when filling 1 character.
<!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>
You might also like:
In this article, we will see how to use an array in React JS. We can use the JavaScript standard Array functio...
Aug-12-2022
In this article, we will explore the process of converting a PHP array into a JSON object. We'll achieve this transf...
Jul-08-2020
In this article, we will see how to build a live chat app in laravel 9 and vue js. Here, we will learn how to creat...
Feb-02-2023
In this article, we will see how to create a multi language website in laravel 9. In this example, we will see the...
Apr-20-2022