Hello Dear friends! Today also I brought you a very interesting tutorial. That is how to move focus to next input after type. This function we mainly needed for building forms. When user fill the input the cursor should move to next input. We can do this based on key up on jQuery function. We can do many things by using jQuery . So learn some jQuery or JavaScript. Let’s start the tutorial.
This one I was made for a verification phone. When we verify pin code or verification code you might have seen these kind of forms. There when you can enter one digit in input. And also when you type one it will move to next. Here we can use a simple trick. That is we can give same class to all input. Then we can simply catch the input function. We can’t give same id to all. because for further validation we might want to separately identify the inputs. Hence we can use different names and id with same class name to all inputs.
HTML code for move focus
<form>
<input type="text" name="v1" id="v1" class="vinput" maxlength="1">
<input type="text" name="v2" id="v2" class="vinput" maxlength="1">
<input type="text" name="v3" id="v3" class="vinput" maxlength="1">
<input type="text" name="v4" id="v4" class="vinput" maxlength="1">
</form>
jQuery code for change focus by key up
$(".vinput").keyup(function(){
$(this).next('input').focus();
});
jQuery code for change focus for backspace and delete
$(".vinput").keyup(function(e) {
if (e.which == 8 || e.which == 46) {
$(this).prev('input').focus();
}
else {
$(this).next('input').focus();
}
});
Here 8 and 46 represent keys. In jQuery we can code for keys by using values. 8 and 46 represent the backspace and delete keys. If you search you can find numbers for all the keys.
Conclusion
I hope you have understood how to move focus to next input after type. If you like this please don’t forget to comment and share. Please check how to create a form with multiple divisions also if you are interested. We will meet again with another tutorial. Until goodbye all.
Thanks a lot…
Thanks for the good article, I hope you continue to work as well.
Thank you
I would like to thnkx for the efforts you have put in writing this blog. I am hoping the same high-grade blog post from you in the upcoming as well. In fact your creative writing abilities has inspired me to get my own blog now. Really the blogging is spreading its wings quickly. Your write up is a good example of it.
Thank you so much for your comments. Please keep reading us.
I genuinely treasure your piece of work, Great post.
Thank you.