Jump throught your inputs!
Automatization is something more common nowadays, and often we are asked to jump between inputs once them are filled up.
You can find a working example above.
To get this working out, let's get a look on how to implement it.
-
Import the jQuery plug-in we provide.
<script src="path/jquery.min.js"></script> -
Import the plug-in.
<script src="path/WEInputJump.js"></script> -
Insert the HTML markup
<div class="inputJumpContainer"> <div class="inputJump"> <label for="labelInput">Label text</label> <input type="text" maxlength="8" id="labelInput"> </div> <div class="inputJump"> <label for="labelInput2">Label text</label> <input type="text" maxlength="1" id="labelInput2"> </div> </div> - You can add as many as you want. Take in mind that will jump between inputs that are wrapped in the inputJumpContainer class.
The plug-in will do the rest, it's all you need to set-up.
WEInputJump will jump between inputs until you reach the last one. Once this one is filled, it will check for any previous inputs that are not filled up with the maxlength given and will focus it.
Also, if the user focuses on a input which is filled up, it will select all the value, and once filled up again, it will do the same for the following input.
Options
Some options to give to the plug-in:
- maxlength: required, Ingeter. The number of characters it will take before it jumps to the following input.
- inputJumpColumn: optional, class. inputJumpContainer works as a flexbox. By default the direction is row, but you can change it easily with this class along with it to make it column direction. As always, you can change it with your own CSS.
-
.on("change"): When an input is full filled, it triggers an on.("change") event. Below we leave an example. This is handful when for example, any test of the value must be take care of.
$(".inputJump").find("input").on("change", function() { //You function here });