Autotab To Next Input Field JQuery

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

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:

Recommended Post
Featured Post
How To Create Custom Error Page In Laravel 9
How To Create Custom Error Pag...

In this article, we will see how to create a custom error page in laravel 9. Here we will create a custom 404 error...

Read More

Feb-09-2023

Laravel Accessor and Mutator Example
Laravel Accessor and Mutator E...

In this article, we will see the laravel accessor and mutator example. Here, we will learn what is accessor an...

Read More

Mar-16-2021

Laravel orderBy, groupBy and limit Example
Laravel orderBy, groupBy and l...

In this article, we will see the laravel orderBy, groupBy, and limit examples. Here we will see different types of&...

Read More

Jan-27-2021

Localization - Laravel Localization Example
Localization - Laravel Localiz...

In this article, we will see localization - laravel localization example. Laravel's localization features provide a...

Read More

Nov-06-2020