I've got four inputs that each take one number. What I want to do is set the focus automatically to the next input once the number has been set. They all have the class "inputs".
This didn't quite work:
$(".inputs").keydown(function () { $(this).next().focus(); });
To focus on the next field when pressing enter in React, we can set the onKeyDown prop of the inputs to a function that gets the next input and call focus on it. We have the handleEnter function that checks if the pressed key is Enter by checking the event. key property.
jQuery focus() Method The focus event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it). The focus() method triggers the focus event, or attaches a function to run when a focus event occurs. Tip: This method is often used together with the blur() method.
I would suggest setting maxlength as 1 to each textbox and switch to next one once the val.length
and the maxlength
is same.
DEMO
$(".inputs").keyup(function () { if (this.value.length == this.maxLength) { $(this).next('.inputs').focus(); } });
Edit: Spent some time for the following (not fully tested, but basic tests worked fine)
1. Allowing just numeric chars 2. Allow some control like del, backspace, e.t.c 3. Backspace on empty textbox will move to prev textbox 4. charLimit var to dynamically decide how many char you want to restrict.
Code:
$(function() { var charLimit = 1; $(".inputs").keydown(function(e) { var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145]; if (e.which == 8 && this.value.length == 0) { $(this).prev('.inputs').focus(); } else if ($.inArray(e.which, keys) >= 0) { return true; } else if (this.value.length >= charLimit) { $(this).next('.inputs').focus(); return false; } else if (e.shiftKey || e.which <= 48 || e.which >= 58) { return false; } }).keyup (function () { if (this.value.length >= charLimit) { $(this).next('.inputs').focus(); return false; } }); });
DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With