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
Laravel 8 Send Mail using Queue
Laravel 8 Send Mail using Queu...

In this tutorial I will show you laravel 8 send mail using queue, many time we can see some process to take mo...

Read More

Sep-24-2021

How To Disable Specific Dates In jQuery Datepicker
How To Disable Specific Dates...

In this tutorial, we will see how to disable specific dates in jquery datepicker. The jQuery UI Datepicker is...

Read More

Jun-16-2022

How to Search Object by ID and Remove It from JSON Array In JavaScript
How to Search Object by ID and...

In this example we will see how to search object by id and remove it from json array in javascript. we need to add ...

Read More

May-26-2021

How to Search Records using Laravel 10 Livewire
How to Search Records using La...

Hey developers! Today, I'm excited to walk you through an incredibly powerful feature in Laravel 10: searching...

Read More

Dec-27-2023