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 Helper Function In Laravel 10
How To Create Custom Helper Fu...

In this article, we'll explore how to create a custom helper function in Laravel 10. This custom helper function can...

Read More

Mar-20-2023

Helper Function Example in Laravel 8
Helper Function Example in Lar...

Hello All, In this post we will see helper function example in laravel, Laravel provide in-buit global "hel...

Read More

Jun-22-2021

How To Encrypt And Decrypt String In Laravel 9
How To Encrypt And Decrypt Str...

In this article, we will see how to encrypt and decrypt a string in laravel 9. Using crypt helper, As we all know larave...

Read More

Mar-09-2022

Laravel 11 Unique Validation on Update
Laravel 11 Unique Validation o...

In Laravel 11, when you're updating a resource (like a user or product) in your database, you might want to ensure t...

Read More

Feb-06-2025