Auto Tab To Next Input Field JQuery

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

--

--

--

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript: Spread Operator In a glance

How To Get Selected Checkbox List Value In Jquery

How To Get Selected Checkbox List Value In Jquery

Dynamic validation with Yup and Formik using React hooks

How To Setup Redux with Redux Toolkit

Reduce your Redux boilerplate

Java Script callbacks and promises

React — Redux workflow in 4 steps — Beginner Friendly Guide

Craft Superset chart in React that leverage on Superset backend

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Websolutionstuff

Websolutionstuff

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.

More from Medium

How To Fix ( Error Establishing Database Connection ) in digital ocean.

Everything , Everywhere

Issues After Uninstalling Windows Server Hosting .NET Core 2.0

A Beginner’s guide to learn about The Git and The GitHub