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 Use Array In React JS
How To Use Array In React JS

In this article, we will see how to use an array in React JS. We can use the JavaScript standard Array functio...

Read More

Aug-12-2022

How To Convert PHP Array To JSON Object
How To Convert PHP Array To JS...

In this article, we will explore the process of converting a PHP array into a JSON object. We'll achieve this transf...

Read More

Jul-08-2020

How To Build Live Chat App In Laravel 9 And Vue JS
How To Build Live Chat App In...

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...

Read More

Feb-02-2023

How To Create Multi Language Website In Laravel 9
How To Create Multi Language W...

In this article, we will see how to create a multi language website in laravel 9. In this example, we will see the...

Read More

Apr-20-2022