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:
- Read Also: Copy To Clipboard JQuery
- Read Also: How to Clear Form Data Using jQuery
- Read Also: How To Remove Spaces Using JQuery
- Read Also: Datatables Show And Hide Columns Dynamically In jQuery
Recommended Post
Featured Post
Get User Location using IP Add...
Hello developers! In this article, we'll see how to get user location using an IP address in laravel 11. Here,...
May-01-2024
Laravel 9 whereDate And whereM...
In this article, we will see laravel 9 wheredate() and wheremonth() query examples. The whereDate me...
Oct-19-2022
jQuery Show and Hide Effects E...
Hello friends, in this tutorial, we will see jQuery show and hide effects example. jQuery show method and jQuery...
Jan-21-2022
How To Create Custom Middlewar...
In this article, we will give you information about middleware and we will see how to create custom middleware in l...
Aug-24-2020